Question

您好我正在使用Laravel的Masonry，我基本上将我的博客加载到砌体布局中。我输出的摘要以及所有内容，内容默认由CSS隐藏。我点击了一个阅读更多按钮，向该div添加一个类，它扩展了砌体块并隐藏了摘要并显示了完整内容。

然而，当我点击另一个div上的更多内容时会显示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;
}

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');
    $(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（）来“up”到该div 。 div（.button）位于包含文章的3个（div）的另一个div中。因为我们想要'up'到那个divs级别，我们再次使用parent（）。现在处于最高级别，我们可以通过siblings（）方法引用其他文章的最高级别。兄弟姐妹在同一级别寻找其他元素，即由同一元素包含。所以我们用一个.article类来看兄弟姐妹，然后抓住子元素并显示/隐藏它们。在兄弟姐妹抽象被设置为显示并且完整故事被设置为隐藏之后，我们然后切换（）与被点击的按钮相同的div所包含的子项

.show（）。hide（）不起作用

1 个答案: