jquery - 对 $this 和 is(":visible") 使用 not 函数

Question

我有以下html...

<button>one</button>
<div class="div1"></div>
<button>two</button>
<div class="div2"></div>
<button>three</button>
<div class="div3"></div>
<button>four</button>
<div class="div4"></div>

这是我用过的 jQuery....

$(document).ready(function(){
  $("button").click(function(){
    $(this).next().slideToggle();
  });
});

如果其他人打开（可见），我想再次使用slideToggle()功能（即隐藏）。我如何使用not函数 with以便在其他可见的同时显示单击的相邻 div 而其他的将被关闭$this？is(":visible")

http://jsfiddle.net/VWfv7/

Answer 1

尝试

$(document).ready(function(){
    $("button").click(function(){
        var $this = $(this), $next = $(this).next();
        $this.siblings('div:visible').not($next.next()).slideUp();
        $next.slideToggle();
    });
});

演示：小提琴

Answer 2

像这样？

$(document).ready(function(){
  $("button").click(function(){
     $(this).next().slideToggle().siblings('[class^=div]').slideUp();
  });
});

演示

您不一定需要使用:visible上滑。只需将特定类模式的兄弟姐妹 div 向上滑动即可。

或者因为你想使用 :visible 而不是：

$(document).ready(function(){
  $("button").click(function(){
      $('[class^=div]:visible').not($(this).next().slideToggle()).slideUp();
      //Select the class pattern that is visible to slideUp (provide a container possibly)
      //but exclude the clicked element's next div and slideToggle it simultaneously.
  });
});

演示