Question

我有一组div，我想要做的是当我点击阅读更多按钮它显示div＆＃34; myContent＆＃34;并隐藏该特定容器的按钮，而不是所有具有相同类名的div。当我点击关闭按钮它隐藏div（并且因为按钮在那里它应该在技术上隐藏按钮）并再次显示read more按钮。

现在发生的事情要么全部显示，要么都没有显示。我是新手（使用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>
<!-- -->

谢谢！

Answer 1

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

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

DEMO

Answer 2

如果我理解正确here正是您所寻求的：）

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

多个Div显示/一次隐藏一个

2 个答案: