jquery - 单击 'Read More' 按钮会导致打开所有 block 而不是其特定的父 block

Question

我必须展示一些功能列表。在初始页面加载时，我只想显示三点。 一旦我点击“阅读更多”按钮，该特定的 div 休息功能应该被打开。

但问题是单击“阅读更多”按钮会导致打开所有功能 block 。

请考虑这个 html :

<div class="parent first-feature">
    <div class="feature-listing">
        <ul>
            <li>Some Content</li>
            <li>Some Content</li>
            <li>Some Content</li>
            <li class="r-more"><a href="JavaScript:void(0);" class="read-more">Read More!</a></li>                
        </ul>
    </div>
    <div class="more-content" style="display:none;">
        <ul class="feature-listing">                
            <li>Some More Content</li>
            <li>Some More Content</li>
            <li>Some More Content</li>
            <li>Some More Content</li>
            <li>Some More Conten</li>    
            <li class="r-less"><a href="JavaScript:void(0);" class="read-more">Read Less</a></li>                
        </ul>
    </div>
</div>

<div class="parent second-feature">
    <div class="feature-listing">
        <ul>
            <li>Some Content</li>
            <li>Some Content</li>
            <li>Some Content</li>
            <li class="r-more"><a href="JavaScript:void(0);" class="read-more">Read More!</a></li>                
        </ul>
    </div>
    <div class="more-content" style="display:none;">
        <ul class="feature-listing">                
            <li>Some More Content</li>
            <li>Some More Content</li>
            <li>Some More Content</li>
            <li>Some More Content</li>
            <li>Some More Conten</li>    
            <li class="r-less"><a href="JavaScript:void(0);" class="read-more">Read Less</a></li>                
        </ul>
    </div>
</div>

这是我写的函数:

$('.read-more').click(function(){
    $('.more-content').slideToggle('slow');
    $('.r-more').toggleClass('hide-block');
});

Answer 1

这是一个 FIDDLE

$('.read-more').click(function() {
  $(this).closest('.parent').find('.more-content').stop().slideToggle('slow');
  $('.r-more').toggleClass('hide-block');
});