Question

我的网站是一个博客，我在一个HTML页面上有一个包含所有帖子的页面。 “帖子”只是div中的图像，我需要一些信息才能显示和隐藏图像的父div。下面是它的设置：

HTML

<div class="posts">
    <h3>mm/dd/yy<p class="preview">click to show more</p><p class="expand">click to show less</p></h3>
    <h4>Title</h4><br>
    <p class="expand">caption caption caption caption caption caption caption caption caption</p>
    <div class="centertext">
        <img class="post" src="path/to/image">
    </div>
    <br>
</div>

lil CSS

.expand {display：none;}

JS

$(document).ready(function(){
$(".posts").click(function(){
    $('.expand').toggle();
    $('.preview').toggle();
});

我不想发生的最终结果是，当我点击一个时，所有图像及其标题都隐藏起来并显示出来。显示here或全屏here有人请帮助我！附加信息：我也在使用JQuery和Bootstrap

Answer 1

将您的JS更改为：

$(document).ready(function () {
    $(".posts").click(function () {
        $(this).find('.expand').toggle();
        $(this).find('.preview').toggle();
    });

});

或者更简单：

$(document).ready(function () {
        $(".posts").click(function () {
            $(this).find('.expand, .preview').toggle();
        });

    });

要切换意味着您不了解状态。最好的方法是更改css类或数据属性。

Answer 2

您可以使用event.target/this来引用单击的当前对象，并使用find（）查找您单击的对象的子项（展开/预览）或

检查子项是否是.expand / .preview，函数是（）//不是更好的方法

$(document).ready(function () {
    $(".posts").click(function () {
        $(this).find('.expand').toggle();
        $(this).find('.preview').toggle();
    });
});

or

$(document).ready(function () {
    $(".posts").click(function (event) {
        $(event.target).find('.expand').toggle();
//check if target is .expand or its child then first go to its parent with .parents().eq() then apply find()
        $(event.target).find('.preview').toggle();
//check if target is .preview or its child then first go to its parent with .parents().eq() then apply find()
    });
});

如何轻松地显示隐藏divs INSIDE div？

2 个答案: