jquery - Jquery Slidetoggle 每个功能（打开/关闭）

Question

我有以下一段 jquery。这基本上是一个内容滑块，当我点击一个带有它的 id 的链接时，slick-toggle1它会向下滑动匹配的内容slickbox1。与slick-toggle2 --> slickbox2etcetc 相同。

$('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

hidable为您要隐藏的每个链接添加一个类，例如，<a class="clickdown hidable">然后在单击功能中，执行$(".hidable").hide();

Answer 2

我认为您正在搜索jquery 手风琴：http ://docs.jquery.com/UI/Accordion 。这个 jQuery 插件会自动执行此操作。滑动你点击打开的那个。并关闭其余部分。

Answer 3

试试这个，它将找到所有以 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 4

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

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