Jquery函数不能处理共享类名的特定div

时间:2014-09-04 09:08:11

标签: jquery html

我有几个这样的标记作为用户的帖子,我想要的是当用户点击.showComments .threadComments div向下滑动时,我想要的是,在{{1}的所有div上}。

.threadComments

我尝试了下面列出的多种方法,但它们都会触发<div class="row"> <div class="large-2 columns" align="center"> <img class="th" src="http://placehold.it/60x60&text=[img]"/> <span class="user_under_thumbnail">Andrei</span> </div> <div class="large-10 columns"> <p class="speechBubbleMain">1 ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit, dolore aliqua non est magna in labore pig pork biltong.</p> <ul class="inline-list"> <li class="threadoptions"><a>Preview</a></li> <li class="threadoptions"><a>Share</a></li> <li class="threadoptions"><a class="showComments">Comments</a></li> </ul> <div class="ThreadComments"> <!-- Here is the collapsible part --> <div class="row collapse"> <div class="large-1 columns small-3" align="center"><img src="http://placehold.it/35x35&text=[img]"/></div> <div class="large-11 columns"><p class="speechBubbleSecondary"><strong class="commenter_name">George</strong> Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit</p></div> </div> <div class="row collapse"> <div class="large-1 columns small-3" align="center"><img src="http://placehold.it/35x35&text=[img]"/></div> <div class="large-11 columns"><p class="speechBubbleSecondary"><strong class="commenter_name">Iordache</strong> Bacon ipsum dolor sit amet nulla ham qui sint exercitation eiusmod commodo, chuck duis velit. Aute in reprehenderit</p></div> </div> <div class="row collapse"> <!-- the user's input --> <div class="large-1 columns small-3" align="center"><img src="http://placehold.it/35x35&text=[img]"/></div> <div class="large-11 columns"><textarea class="thread_submit_comment"></textarea></div> </div> </div> </div> </div> 所有的div

.threadComments

但他们似乎都用$('.ThreadComments').hide(); $(".showComments").click(function(e) { e.preventDefault(); var slidethis = $(this).parent().find('.ThreadComments'); //or var slidethis = $(this).closest('.showComments').find('.ThreadComments'); //or var slidethis = $(this).closest('.showComments').next('.ThreadComments'); //or var slidethis = $(this).parents('.inline-list').closest('.ThreadComments'); $('.ThreadComments').not(slidethis).slideToggle(); slidethis.stop().slideToggle(); }); 触发所有div。 我已经在StackOverflow上查看了有关此问题的所有最新帖子,但似乎没有什么对我有用,是否与标记有关?无法弄清楚我做错了什么。

1 个答案:

答案 0 :(得分:1)

试试这个:

$('.ThreadComments').hide();
$(".showComments").click(function(e) {
    var slidethis = $(this).parents('.inline-list').next('.ThreadComments');
    slidethis.slideToggle();
    e.preventDefault();
});

JSFiddle

相关问题