简单的显示/隐藏jQuery的麻烦

好吧，我觉得像一个800磅的大猩猩试图在jQuery中穿线。我需要一个脚本，它将在列表中预制一个简单的显示/隐藏（最好有一个很好的滑入和滑出）。简单的显示/隐藏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”和“隐藏”的。理想情况下，当它们嵌套在（“li.tier_1”）中的li被单击时，它的子ul将会删除hide类，并且其中包含的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手中可能倾向于偷看，我会非常感激。如果你还可以建议如何进行滑入和滑出，那也是太棒了！

来源

2010-04-13 Fuego DeBassi

哦 - 如果已经展开的tier_2 ul被重新点击，那么它会很好的重新添加该隐藏类。 – 2010-04-13 22:31:26

替换为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; 
    }); 
});

来源

2010-04-13 22:36:26 Haris

作品像一个魅力兄弟，理解为什么。简单。只有其他问题是重新隐藏相同tier_2列表的方法。 I.E.有人点击，看到的列表，然后重新点击同一个。现在它又弹回来了？ – 2010-04-13 23:10:29

哦，顺便说一句。谢谢。 – 2010-04-13 23:17:02

已编辑。检查答案。 – Haris 2010-04-13 23:31:33

或者，你可以使用：

$(".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“对象。

来源

2010-04-13 22:42:14

简单的显示/隐藏jQuery的麻烦

回答

相关问题