jQuery - 使用類的按鈕來定位下一個div的類別（非兄弟）

Question

這裏是JSFiddle。

HTML：

<div class="block-1"> 
    <p> 
    <a class="more-info">Learn More</a> 
    </p> 
    <div class="extra-bits"> 
    <p> 
    Yadda Yadda Yadda 
    </p> 
    </div> 
</div> 
<div class="block-2"> 
    <p> 
    <a class="more-info">Learn More</a> 
    </p> 
    <div class="extra-bits"> 
    <p> 
     Yadda Yadda Yadda 
    </p> 
    </div> 
</div> 

JS：

$('.more-info').click(function() { 
    $('.extra-bits').slideToggle(); 
}); 

基本上，我需要 「瞭解詳情」 鏈接僅定位div.extra位的下一個實例。

我嘗試使用

$(this).next.slideToggle(); 

以及

$(this).nextUntil('.more-info', '.extra-bits').slideToggle(); 

但我無法找到任何東西，做什麼，我想它。

任何想法？

Answer 1

，你可以做這樣的：

$('.more-info').click(function() { 
    $(this).parent("p").next('.extra-bits').slideToggle(); 
}); 

得到父P，然後得到下一個額外位

https://jsfiddle.net/dkxmhs5v/2/

Answer 2

你必須使用parent()到了樹的水平，並找到next() .extra位附近div來執行slideToggle

$('.more-info').click(function() { 
 

 
    $(this).parent().next(".extra-bits").slideToggle(); 
 
});

.extra-bits{ 
 
    display:none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="block-1"> 
 
    <p> 
 
    <a class="more-info">Learn More</a> 
 
    </p> 
 
    <div class="extra-bits"> 
 
    <p> 
 
     Yadda Yadda Yadda 
 
    </p> 
 
    </div> 
 
</div> 
 
<div class="block-2"> 
 
    <p> 
 
    <a class="more-info">Learn More</a> 
 
    </p> 
 
    <div class="extra-bits"> 
 
    <p> 
 
     Yadda Yadda Yadda 
 
    </p> 
 
    </div> 
 
</div>

Answer 3

在這種情況下，你可以使用.find()。退房小提琴：https://jsfiddle.net/dkxmhs5v/3/

$('.more-info').click(function() { 
    $(this).parents('div').find('.extra-bits').slideToggle(); 
}); 

Answer 4

你可以先上樹並找到兄弟姐妹：

$('.more-info').click(function() { 
    $(this).parents().siblings('.extra-bits').slideToggle(); 
});