滑动切换 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>

我希望默认拥有 .amministrazione、.didattica 和 display:none 上的所有链接。当用户单击 .unique1 或 .unique2 或 .unique3 或 .unique4（仅）时，下一个 .amministrazione 和 .didattica slidetoggle down.

这是我目前所拥有的..但它没有切换正确的元素：

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

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

Answer 2

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

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

Fiddle 2

滑动切换 2 个相邻的 div

Slidetoggle 2 adjacent divs

html

javascript

jquery

slidetoggle