0

私は次の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()他の人が開いている（表示されている）場合は、関数（つまり非表示）を再度使用したいと思います。他が表示されている間、クリックされた隣接する div が表示され、他のものが閉じられるように、not関数$thisを使用するにはどうすればよいですか?is(":visible")

http://jsfiddle.net/VWfv7/

4

2 に答える 2

1

このような？

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

デモ

: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.
  });
});

デモ

于 2013-07-11T04:37:31.007 に答える
1

試す

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

デモ:フィドル

于 2013-07-11T04:36:53.310 に答える