Question

没有多少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的每个层面看到的那样，有一些类别为tier_2和hide。我一直在尝试创建一些简单的jQuery，点击它会从它的子ul中删除hide类，但同时检查没有显示其他类的tier_2（也就是另一个有hide类）。这应该使访问者不会同时扩展这么多项目，这将使布局看起来很时髦。

只是不确定如何实现这一点，任何想法？

Answer 1

我认为你不需要隐藏类。您可以使用show()和hide() JQuery函数，或toggle()。

如果我错了并且您确实需要隐藏课程，则可以使用addClass()和removeClass()函数。

Answer 2

首先，您需要将孩子<ul>移到<li>内以使其有效（<ul>不能成为<ul>的直接子女）来修复您的标记。在那之后，不需要hide类，你可以隐藏所有类，使用这样的CSS：

ul li ul { display: none; }

然后你可以使用jQuery做你想做的事情，如下所示：

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

如果您愿意，可以一次显示一个并将最后一个打开，如果您不希望它可折叠，则将最后一个呼叫更改为.slideDown()而不是.slideToggle()。

You can see a working demo here

Answer 3

检查此代码：

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

我想建议你在第一层“ul”元素中添加一些类，因为上面的代码也会在第二层“li”中设置点击处理程序。

显示/隐藏jQuery

3 个答案: