JQuery中的目標問題

Question

我遇到問題。我有相同的類與相同的類。當我用.comments-toggle類點擊（切換＃1）時，我只需要在.toggle-container以下的div展開。正如此代碼所示，它還會觸發下面的.toggle-container div（切換＃1）div進行展開。

如何點擊切換＃1，並且只有類toggle-container展開的下面的div才能展開，而不是所有的div都帶有類toggle-container？

*** EDITED HTML ****

我只需要jQuery的改變，請不要改變HTML作爲解決方案。

我希望這是有道理的。

HTML：

<div> 
    <div class="comments-toggle">Toggle #1</div> 
</div> 

<div> 
    <div class="comments-expanded-container toggle-container"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiumdod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p> 
</div> 
</div> 

<div> 
    <div class="comments-toggle">Toggle #2</div> 
</div> 

<div> 
    <div class="comments-expanded-container toggle-container"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiumdod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p> 
    </div> 
</div> 

CSS：

.comments-expanded-container { 
display: none; 
} 

.expand { 
display: inline-block; 
} 

JQUERY：

(function() { 
    $('.comments-toggle').on('click', function(event) { 
     $('.toggle-container').toggleClass('expand'); 
    }) 
})(); 

JS FIDDLE： https://jsfiddle.net/Jakwakwa/c2ogevff/

*** EDITED HTML ****

Answer 1

使用$(this).next()點擊監聽器裏來目標的下一個toggle-container - 見下面的演示：

(function() { 
 
    $('.comments-toggle').on('click', function(event) { 
 
    $(this).next('.toggle-container').toggleClass('expand'); 
 
    }) 
 
})();

.comments-expanded-container { 
 
    display: none; 
 
} 
 

 
.expand { 
 
    display: inline-block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="comments-toggle">Toggle #1</div> 
 

 
<div class="comments-expanded-container toggle-container"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiumdod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p> 
 
</div> 
 

 
<div class="comments-toggle">Toggle #2</div> 
 

 
<div class="comments-expanded-container toggle-container"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiumdod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation</p> 
 
</div>