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

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

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

Slidetoggle 2相邻的div

2 个答案: