Question

您好我正在使用带有laravel的砌体，我基本上将我的博客加载到砌体布局中。我有一个我输出的摘要以及所有内容，内容默认由css隐藏。我有一个读取更多按钮，一旦点击添加一个类到该扩展砌体块的div。

我也想在这个砌块中隐藏摘要，但我似乎无法成功地做到这一点，而是隐藏了页面上的所有摘要。我尝试过使用父母和孩子等选择器，但我不认为我在这里得到了这个概念。任何有任何想法，我如何隐藏类div.abstract并显示div.fullstroy当我点击div.button #read-more ??

我的代码的简单版本位于下方或请查看我的JSFIDDLE

任何帮助都非常感激。

HTML：

<div id="masonary-blogs">
    <div class="one-third column">
        <h3>title</h3>
        <div class="abstract">
            <p>abstract</p>
        </div>
        <div class="fullstory">
            <p>fullstory</p>
        </div>
        <div class="button">
            <a href="#" id="read-more">Read more</a>
        </div>
    </div>
       <div class="one-third column">
        <h3>title</h3>
        <div class="abstract">
            <p>abstract</p>
        </div>
        <div class="fullstory">
            <p>fullstory</p>
        </div>
        <div class="button">
            <a href="#" id="read-more">Read more</a>
        </div>
    </div>
        <div class="one-third column">
        <h3>title</h3>
        <div class="abstract">
            <p>abstract</p>
        </div>
        <div class="fullstory">
            <p>fullstory</p>
        </div>
        <div class="button">
            <a href="#" id="read-more">Read more</a>
        </div>
    </div>

</div>

CSS：

.one-third {
    width:23%;
    background:#dedede;
    min-height:100px;

}
.column {
    display:inline-block;
    margin-left:5px;
    margin-right:5px;
}
.fullstory {
    display:none;
}
.gigante {
    width:100%;
}
.hide {
    display:none;
}

.show {
    display:block;
}

jQuery的：

$('#masonary-blogs').on('click', 'a', function(e){
    var blogItem = $(this).parents('.one-third'),
        container = $('#masonary-blogs');

    e.preventDefault();
    console.log('Blog link click');

    $('.gigante').removeClass('gigante');
    $(e.target).parents('.one-third').addClass('gigante');
    $('.one-third').children('.abstract').hide();

});

Answer 1

嗯.abstract div是一个兄弟姐妹而不是按钮的父母或孩子，所以它将是

$('.button').on('click',function(){
  $(this).siblings('div.abstract').hide();
})

编辑：或者如果你想要显示完整的故事并隐藏摘要，它可能就像

$('.button').on('click',function(){
  $(this).siblings('div').toggle();
})

jQuery点击按钮显示并隐藏最近的div

1 个答案: