Question

我想要做的是默认情况下不会显示班级collapsible_list的所有元素（有一个例外...见下文*），然后在其父级<div class="tab_box">时切换显示点击。在同一次点击期间，我也希望隐藏类collapsible_list的每个其他元素，以便在任何给定时间只扩展其中一个元素。

*此外，当页面最初加载时，我还要查看collapsible_list的元素是否具有类a的子activelink元素，如果有的话是的，那么我希望该链接的父collapsible_list元素是默认展开的元素。

以下是一些示例html代码：

<style>
.collapsible_list {
  display: none;
}
.collapsible_list.active {
  display: block;
}
</style>

<div id="sidebar">
  <div class="tab_box">
    <div class="collapsible_tab"><a href="#" class="btn-slide-2014">2014</a></div>
    <div class="collapsible_list panel-2014">
        <a href="/2014/1">1</a>
        <a href="/2014/2">2</a>
        <a href="/2014/3">3</a>
    </div>
  </div>
  <div class="tab_box">
    <div class="collapsible_tab"><a href="#" class="btn-slide-2013">2013</a></div>
    <div class="collapsible_list panel-2013">
        <a class="activelink" href="/2013/1">1</a>
        <a href="/2013/2">2</a>
        <a href="/2013/3">3</a>
    </div>
  </div>
</div>

这就是我目前使用javascript的地方（虽然我尝试了一些不同的方法，但没有一个像我希望的那样工作）：

$(document).ready(function() {
  // This looks redundant to me but I'm not sure how else to go about it.
  $(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active");
  $(".tab_box").click(function() {
    $(this).children(".collapsible_list").toggleClass("active").slideToggle("slow", function() {
      $(".collapsible_list.active:not(this)").each(function() {
        $(this).slideToggle("slow");
      });
    });
  });
});

我希望这不会让人感到困惑，但如果有话，请随时告诉我。非常感谢任何帮助。

Answer 1

由于您有一个需要排除的dom元素引用，请使用.not（）而不是：not（）选择器

jQuery(function ($) {
    // This looks redundant to me but I'm not sure how else to go about it.
    $(".collapsible_list").children("a.activelink").parent(".collapsible_list:not(.active)").addClass("active").show();
    $(".tab_box").click(function () {
        var $target = $(this).children(".collapsible_list").toggleClass("active").stop(true).slideToggle("slow");
        //slidup others
        $(".collapsible_list.active").not($target).stop(true).slideUp("slow").removeClass('active');
    });
});

此外，不是使用幻灯片回调，而是直接在回调中执行，以便两个动画可以同时运行

同时删除css规则.collapsible_list.active，因为显示由动画控制（幻灯片）

Answer 2

试试这个。

$('.collapsible_tab a').on('click', function(e){
    e.preventDefault();
    $('.collapsible_list').removeClass('active')
    $(this).parent().next('.collapsible_list').toggleClass('active');
});

Fiddle Demo

Answer 3

如果您只记得之前打开过的列表，我认为您的代码会不那么复杂：

jQuery(function($) {
    // remember current list and make it visible
    var $current = $('.collapsible_list:has(.activelink)').show(); 

    $(".tab_box").on('click', function() {
        var $previous = $current;

        // open new list
        $current = $('.collapsible_list', this)
            .slideToggle("slow", function() {
                // and slide out the previous
                $previous.slideToggle('slow');
            });
    });
});

Demo

如何将jQuery的slideToggle（）应用于$（this）并执行与所有其他元素相反的操作？

3 个答案: