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

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

我也想隐藏在这个砌体块内的抽象，但我似乎无法成功地做到这一点，而是隐藏页面上的所有摘要。我尝试过使用选择器，如父母和孩子，但我不认为我在这里很理解这个概念。任何有任何想法，我怎么可以隐藏类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(); 

});

来源

2014-12-24 001221

您是否尝试过的最接近的JQuery（）函数？ http://api.jquery.com/closest/ –

@KyleT是的，我做过了，我试过这个'$（'。'1/3'）。closest（'。abstract'）。hide（）;'但是它不起作用 – 001221

井.abstract DIV是兄弟不是家长或孩子的按钮，它会be

编辑：或者如果你想显示完整的故事和隐藏抽象的也可能是像

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

来源

2014-12-24 23:22:51

ahh是的谢谢。我用我现有的代码加入了这个。'$（e.target）.parents（）。siblings（'div.abstract'）。hide（）; $（e.target）.parents（）。siblings（'div.content'）。show（）;'它的工作原理非常感谢！ – 001221

使用toggle（）而不是隐藏或显示将消除您的一些代码保持干DRY –

你的意思是这样吗？ ''（e.target）.parents（）。siblings（'div.content'）。toggle（）;'我还有一个问题，当我点击下一个阅读更多我想隐藏最后的div.fullstory并显示最后的div.abstract。我怎样才能做到这一点？我将使用哪个选择器？ – 001221

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

回答

相关问题