.show() .hide() 不工作

Question

您好，我正在将 Masonry 与 Laravel 一起使用，我基本上是将我的博客加载到砌体布局中。我有一个我输出的摘要以及所有内容，默认情况下，内容被 CSS 隐藏。单击后，我有一个阅读更多按钮，向该 div 添加了一个类，该类扩展了砌体块并隐藏了摘要并显示了全部内容。

但是，当我在另一个 div 上单击 read more 时，会显示 div.fullstory，我想隐藏它，但我不确定如何尝试使用 jQuery 以前的方法，但这似乎不是为我锻炼。

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

查询：

$('#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');
    $(e.target).prev('div.abstract').show();
    $(e.target).prev('div.content').hide();

});

Answer 1

http://jsfiddle.net/9jf48c7g/7/

$('#masonary-blogs').on('click', 'a', function(e){
e.preventDefault();
var article = $(this).parent().parent();
    article.siblings('.article').children('.abstract').show();
    article.siblings('.article').children('.fullstory').hide();    
    article.children('.abstract, .fullstory').toggle()
});

好的，这里有一个简短的解释，供下一个人参考。

单击按钮中的链接后，我们使用 jquerys $(this) 来引用用户刚刚单击的内容，因为这是在 div 中，我们必须使用 parent() 来“向上”到该 div .该 div (.button) 在另一个 div 中，其中包含文章的 3 个片段(div)。因为我们想“升级”到那个 div 级别，所以我们再次使用 parent()。现在在最上层，我们可以通过siblings()方法引用其他文章最上层。兄弟姐妹寻找同一级别的其他元素，即由同一元素包含。所以我们用 .article 类查看兄弟姐妹，然后抓取子元素并显示/隐藏它们。在将兄弟姐妹的摘要设置为显示并且将完整的故事设置为隐藏之后，我们然后切换（）与单击的按钮相同的 div 包含的子项