Jquery Slidetoggle各个功能（打开/关闭）

Question

我有以下 jquery 片段。它基本上是一个内容滑块，当我单击 id 为 slick-toggle1 的链接时，它将向下滑动匹配的内容 slickbox1。与 slick-toggle2 相同 --> slickbox2 等等。

$('a.clickdown').each(function() {
      var $this = $(this);
      var index = $this.attr('id').match(/(\d+)$/, '');
      var number = parseInt(index[1]);
      $this.click(function() {
          $('#slickbox' + number).slideToggle(400);
          $this.toggleClass('opened').blur();
         return false;
     });
}); 

此时，当我单击各个链接时，相应的区域将堆叠起来。但是我想要实现的是：当我点击 slick-toggle2 时，它将显示 slickbox2 但隐藏其他内容（因此 slickbox1 & slickbox3）。

Answer 1

试试这个，它将找到 id 以 slickbox 开头的所有元素并将其向上滑动。

$('a.clickdown').each(function() {
    var $this = $(this);
    var index = $this.attr('id').match(/(\d+)$/, '');
    var number = parseInt(index[1]);
    $this.click(function() {
        $('[id^=slickbox]').slideUp(); // This does the magic.
        $('#slickbox' + number).stop(true, true).slideToggle(400);
        $this.toggleClass('opened').blur();
        return false;
    });
});

Answer 2

为每个要隐藏的链接添加一个 hidable 类，例如 然后在 click 函数中执行 $( ".hidable").hide();

Answer 3

我认为您正在寻找 jquery Accordion ： http://docs.jquery .com/UI/Accordion 。这个 jQuery 插件会自动执行此操作。将您单击的幻灯片打开。并关闭其余部分。

Answer 4

添加对 #slickbox 的父级（我们将其称为 slick_parent）和所有子 div slideUp 的调用，然后向所需的框滑动：

$this.click(function() {
    $('#slick_parent > div').slideUp();
    $('#slickbox' + number).slideToggle(400);
    $this.toggleClass('opened').blur();
    return false;
});