Javascript 显示/隐藏jQuery

没有太多的JavaScript经验，希望你们中的一位大师能提供帮助

          <div id="themes">
          <h2>Research Themes</h2>
            <ul>
              <li><a href="">Learn about our approach to the <strong>environment</strong></a><span><a href="#">Expand</a></span></li>
                <ul class="tier_2 hide">
                  <li><a href="">Project name numero uno goes here</a></li> 
                  <li><a href="">Project name numero dos goes here</a></li>
                  <li><a href="">Project name numero tres goes here</a></li>
                </ul>
              <li><a href="">Learn about our approach to <strong>human health</strong></a><span><a href="#">Expand</a></span></li>
                <ul class="tier_2 hide">
                  <li><a href="">Project name numero uno goes here</a></li> 
                  <li><a href="">Project name numero dos goes here</a></li>
                  <li><a href="">Project name numero tres goes here</a></li>
                </ul>
              <li class="last"><a href="">Learn about our approach to <strong>national defense</strong></a><span><a href="#">Expand</a></span></li>
                <ul class="tier_2 hide">
                  <li><a href="">Project name numero uno goes here</a></li> 
                  <li><a href="">Project name numero dos goes here</a></li>
                  <li><a href="">Project name numero tres goes here</a></li>
                </ul>
            </ul>
          </div><!-- // end themes -->

研究主题

这是我的标记。正如您可以看到的，在每个li的第一层下，都有ul的第2层和隐藏层。我一直在尝试创建一些简单的jQuery，单击该jQuery将从其子ul中删除隐藏类，但同时检查是否未显示具有tier_2类的其他ul（也称为其他ul具有隐藏类）。这样可以防止访问者一次扩展太多的项目，从而使布局看起来很时髦

只是不确定如何实现这一点，有什么想法吗？

检查以下代码：

$('ul li').live('click', function () {
  $(this).closest('ul').toggle();
});

---

我想建议您向第一层“ul”元素添加一些类，因为上面的代码将在第二层“li”元素上设置单击处理程序。

我认为您不需要隐藏类。您可以使用和JQuery函数，或

---

如果我错了，您确实需要隐藏类，那么您可以使用和函数。

首先，您需要通过将子对象

移动到
中来修复标记，以使其有效（a
不能是
的直接子对象）。之后，不需要使用
hide
类，只需使用如下CSS隐藏所有类：

ul li ul { display: none; }

$('ul li span a').live('click', function () {
  $(this).closest('li').siblings('li').find(".tier_2").slideUp();
  $(this).closest('li').children('ul').slideToggle();
});​

然后，您可以使用jQuery执行您想要的操作，如下所示：

ul li ul { display: none; }

$('ul li span a').live('click', function () {
  $(this).closest('li').siblings('li').find(".tier_2").slideUp();
  $(this).closest('li').children('ul').slideToggle();
});​

这允许一次显示一个，也允许折叠最后一个打开的，如果您愿意，将最后一个调用更改为，而不是如果您不希望它可折叠

当你说“我一直在尝试创建一些简单的jQuery”时，你真的试过了吗？这也不需要专家，所以你应该花一些时间学习基础知识。你所拥有的不是有效的标记…那些
子元素需要在
元素中。你可以用$（'ul li'）很容易地按深度过滤它们。而不是（'ul li'）。live（…）；不过，如果您计划使用可变深度列表，则分配类可能更现实。