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功能与$this和is(":visible")一起使用，以便当其他可见时，将显示已点击的相邻div，而其他div将被关闭？

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();
    });
});

演示：Fiddle

Answer 2

像这样？

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

<强> Demo

您不一定需要使用:visible来进行slideUp。只需将兄弟姐妹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.
  });
});

<强> Demo

使用不与$ this一起使用并且是（“：visible”）

2 个答案: