.show() .hide() не работает

Question

Привет Я использую масонство с Laravel, и я в основном загружаю свои блоги в макетную макет. У меня есть реферат, который я выводил, а также весь контент, содержимое скрыто по умолчанию с помощью 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, мы должны получить «вверх» к этому div с помощью родителя (). что div (.button) находится внутри другого div, который содержит 3 части (div) для статьи. поскольку мы хотим получить «вверх» до уровня divs, мы снова используем parent(). теперь находятся на самом верхнем уровне, и мы можем ссылаться на другие статьи верхнего уровня через метод братьев и сестер(). братья и сестры ищут другие элементы на том же уровне, что и один и тот же элемент. поэтому мы смотрим на братьев и сестер с классом .article, затем захватываем дочерние элементы и показываем/скрываем их. после того, как реферат братьев и сестер был установлен, чтобы показать, и полная история была установлена, чтобы скрыть, мы затем переключаем() дочерние элементы, содержащиеся в том же div, что и кнопка, которая была нажата.