Slidetoggle 2個相鄰的div

Question

<div class="unique1">Blabla1</div>
<div class="amministrazione">Amministrazione</div>
<a href="">some link</a>
<a href="">some link</a>
<div class="didattica">Didattica</div>
<a href="">some link</a>

<div class="unique2">Blabla2</div>
<div class="amministrazione">Amministrazione</div>
<a href="">some link</a>
<div class="didattica">Didattica</div>
<a href="">some link</a>
<a href="">some link</a>

<div class="unique3">Blabla3</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>

<div class="unique4">Blabla4</div>
<div class="amministrazione">Amministrazione</div>
<div class="didattica">Didattica</div>
<a href="">some link</a>

我想display:none .amministrazione，.didattica和所有鏈接display:none默認情況下， display:none 。 當用戶單擊.unique1或.unique2或.unique3或.unique4（僅）時，下一個.amministrazione和.didattica會向下滑動。

到目前為止，這是我所擁有的..但是它沒有切換正確的元素：

jQuery(function () {
    jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
        var index = $(this).index(),
            newTarget = jQuery('.amministrazione, .didattica').eq(index).slideDown();
        jQuery('.amministrazione, .didattica').not(newTarget).slideUp();

    });
});

http://jsfiddle.net/2rgqpzpt/

Answer 1

將nextAll與:first選擇器一起使用以定位適當的divs ：

jQuery(function () {
  jQuery('.unique1, .unique2, .unique3, .unique4').click(function () {
    jQuery('.amministrazione, .didattica').slideUp();
    jQuery(this).nextAll('.amministrazione:first, .didattica:first').stop().slideDown();
  });
});

小提琴1

---

您可以使用nextUntil完成相同的操作：

 jQuery(function () { var un= jQuery('.unique1, .unique2, .unique3, .unique4'); un.click(function () { jQuery('.amministrazione, .didattica, a').slideUp(); jQuery(this).nextUntil(un).stop().slideDown(); }); }); 

小提琴2

Answer 2

You can change your code with 

jQuery(function () { jQuery('.unique1, .unique2, .unique3, .unique4').click(function () { var index = $(this).index(), newTarget = $(this).next('.amministrazione'); newTarget= newTarget.add(newTarget.next()); newTarget.slideDown() jQuery('.amministrazione, .didattica').not(newTarget).slideUp(); }); });