Question

好吧，我觉得有点像800磅重的大猩猩试图在jQuery上穿针。我需要一个脚本，它将在列表中执行简单的显示/隐藏（最好有一个很好的滑入和滑出）。

我的标记看起来像这样：

          <div id="themes">
          <h2>Research Themes</h2>
            <ul>
              <li class="tier_1"><a href="">Learn about our approach to the <strong>environment</strong></a>
                <ul class="tier_2 hide">
                  <li><a href=""><em>How we are tying this all together</em></a></li> 
                  <li><a href=""><strong>Project:</strong> Solor Powered Biofactories</a></li> 
                  <li><a href=""><strong>Project:</strong> Cleaning Water with Nature</a></li>
                  <li><a href=""><strong>Project:</strong> Higher Efficiency Solar Technology</a></li>
                </ul>
              </li>
              <li class="tier_1"><a href="">Learn about our approach to <strong>human health</strong></a>
                <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>
              <li class="tier_1"><a href="">Learn about our approach to <strong>national defense</strong></a>
                <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>
            </ul>
          </div><!-- // end themes -->

您可以看到每个嵌套的ul都有一个“tier_2”和“hide”类。理想情况下，当他们嵌套在li（“li.tier_1”）中时，点击它的子ul将删除隐藏类并且其中包含的li将滑出，但同时应检查所有其他ul.tier_2并确保他们得到了一个隐藏类 - 所以一次只能扩展一个主题。

我设置了一个沙箱来尝试一些事情：http://jsbin.com/odete/3

我的JS看起来像这样：

$(function(){

$(".tier_1 a").each(function(i,o){
  $(this).click(function(e){
    e.preventDefault();
    $(this).addClass("show").siblings("ul").removeClass("show");
    $("ul.tier_2:eq("+i+")").show().siblings("ul.tier_2").hide();
  });
});

});

我确信这完全是一种愚蠢的方式。但是我把它基于另一个脚本，它可以“稍微”起作用，就像你在沙盒中看到的一样。

如果你们中的一个人意味着jQuery的手可能会倾向于偷看我会非常感激。如果您还可以建议如何将过渡滑入和滑出也是太棒了！

Answer 1

用以下代码替换你的jQuery代码：

$(function(){
  $(".tier_1 > a").click(function() {
    var currentList = jQuery(this).parents('li').find('.tier_2');
    $(currentList).slideToggle();
    jQuery(this).parents('ul').find('.tier_2').not(currentList).slideUp();
    return false;
  });
});

Answer 2

或者，您可以使用：

$(".tier_1 a").each(function(i,o){
  $(this).click(function(e){
    e.preventDefault();
    var wasShowing = $(this).siblings('ul:visible').length > 0

    // hide everything... 
    $('.tier_2').hide();
    // give everything the proper classes (hide, since we just hid everything)
    $(".show").addClass('hide').removeClass("show");

    // if the tier was not expanded, then show it... 
    // otherwise leave it hidden
    if (!wasShowing) { 
      $(this).siblings('ul').show();
      $(this).removeClass("hide").addClass("show");
    } 
  });});

这在大页面上确实很慢，因为它会抓取所有“.tier_2”对象。

简单显示/隐藏jQuery的麻烦

2 个答案: