Javascript 多个div一次显示/隐藏一个div

我有一组div，我想做的是当我点击readmore按钮时，它会显示div myContent并隐藏该特定容器的按钮，而不是所有具有相同类名的div。当我单击close按钮时，它隐藏了div，因为按钮在那里，所以技术上它也应该隐藏按钮，并再次显示ReadMore按钮

现在发生的是要么全部显示，要么没有显示。 我是一个使用Jquery的新手，非常感谢您的帮助

HTML

<!-- -->
<div class="member-content">
<div class="member-box">
    <div class="photo">
        <img src="" alt="" />
    </div>
    <div class="contact-details">
        <h3>Mike</h3>
        <span class="role">Member</span><br>
        <span class="telephone">07595 8674523</span><br>

    <a href="#" class="read-more">Read More</a>

    </div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->


<div class="te contentDiv">
 <div class="myContent" style="display:none">
     <p>This Text is hidden</p>
    <a id="close_btn" href="#" class="close-more">Close</a>
 </div>    
</div>
<!-- -->

<!-- -->
<div class="member-content">
<div class="member-box">
    <div class="photo">
        <img src="" alt="" />
    </div>
    <div class="contact-details">
        <h3>Mike</h3>
        <span class="role">Member</span><br>
        <span class="telephone">07595 8674523</span><br>

    <a href="#" class="read-more">Read More</a>

    </div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->


<div class="te contentDiv">
 <div class="myContent" style="display:none">
     <p>This Text is hidden</p>
    <a id="close_btn" href="#" class="close-more">Close</a>
 </div>    
</div>
<!-- -->

<!-- -->
<div class="member-content">
<div class="member-box">
    <div class="photo">
        <img src="" alt="" />
    </div>
    <div class="contact-details">
        <h3>Mike</h3>
        <span class="role">Member</span><br>
        <span class="telephone">07595 8674523</span><br>

    <a href="#" class="read-more">Read More</a>

    </div><!-- .contact-details -->
</div><!-- .member-box -->
</div><!-- .member-content -->


<div class="te contentDiv">
 <div class="myContent" style="display:none">
     <p>This Text is hidden</p>
    <a id="close_btn" href="#" class="close-more">Close</a>
 </div>    
</div>
<!-- --> 

---

谢谢

根据我的理解，你可以试试这个

$('.read-more').click(function () {
    $(this).closest('.member-content').next('.contentDiv').find('.myContent').show();
    $(this).hide();
});

$('.close-more').click(function () {
    $(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
    $(this).closest('.myContent').hide();
});

---

根据我的理解，你可以试试这个

$('.read-more').click(function () {
    $(this).closest('.member-content').next('.contentDiv').find('.myContent').show();
    $(this).hide();
});

$('.close-more').click(function () {
    $(this).closest('.contentDiv').prev('.member-content').find('.read-more').show();
    $(this).closest('.myContent').hide();
});

如果我理解正确，您需要的是：

$('.read-more').click(function () {
    $(this).closest('.member-content').next('.contentDiv').find('.myContent').fadeIn();
    $(this).hide();
});

$('.close-more').click(function () {
    $(this).closest('.contentDiv').prev('.member-content').find('.read-more').fadeIn();
    $(this).closest('.myContent').hide();    
});

如果我理解正确，您需要的是：

$('.read-more').click(function () {
    $(this).closest('.member-content').next('.contentDiv').find('.myContent').fadeIn();
    $(this).hide();
});

$('.close-more').click(function () {
    $(this).closest('.contentDiv').prev('.member-content').find('.read-more').fadeIn();
    $(this).closest('.myContent').hide();    
});

---

---

请添加JSFIDLE或JSBIN您需要向我们展示一些使用JSFIDLE的Javascript，您不需要使用jQuery来做这件事。@DholakiyaAnkit所以目前我正在JSFIDLE上尝试类似的东西，因为您可以看到它不是在我想要的时候发生的请添加JSFIDLE或JSBIN您需要向我们展示一些使用JSFIDLE的Javascript，您不需要使用jQuery来执行此操作。@DholakiyaAnkit因此，目前我正在JSFIDLE上尝试类似的操作，因为您可以看到它不是在我想要的时候发生的。谢谢，我将测试它并获得back@Satpal，我知道。。这可能就是为什么你有25.5公里的积分而不是我的54分@Satpal工作得很好，谢谢！非常感谢您的帮助。@Satpal此功能适用于标准内容，我如何使用此功能以动态生成的内容为目标？@Zinox，我已经更新了事件删除动态生成内容的代码。看到了，谢谢，我会测试一下，然后back@Satpal，我知道。。这可能就是为什么你有25.5公里的积分而不是我的54分@Satpal工作得很好，谢谢！非常感谢您的帮助。@Satpal此功能适用于标准内容，我如何使用此功能以动态生成的内容为目标？@Zinox，我已经更新了事件删除动态生成内容的代码。见@dborghz谢谢！非常感谢您的帮助。@dborghez谢谢您！非常感谢你的帮助。