0

好吧，当谈到 jQuery 时，我感觉自己就像一只 800 磅重的大猩猩试图穿针引线。我需要一个脚本，它会在列表中执行简单的显示/隐藏（最好带有漂亮的滑入和滑出）。

我的标记如下所示：

          <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.tier_1”）中的 li 被单击时，它的子 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 上的意思是这么倾向于偷看我会非常感激。如果您还可以建议如何让过渡滑入和滑出，那也太棒了！

4

2 回答 2

2

将您的 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;
  });
});​

​</p>

于 2010-04-13T22:36:26.040 回答
0

或者，您可以使用：

$(".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-13T22:42:14.793 回答