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

Question

您好，我在 laravel 中使用砖石，我基本上是将我的博客加载到砖石布局中。我有一个我输出的摘要以及所有内容，默认情况下，内容被 css 隐藏。单击后，我有一个阅读更多按钮会向该 div 中添加一个类，该类会扩展砌体块。

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

我的代码的简单版本如下或请查看我的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();
})