如何在jQuery中选择深跨元素?
这是我的博客模板,每篇文章都有这样的HTML:如何在jQuery中选择深跨元素?,jquery,jquery-selectors,Jquery,Jquery Selectors,这是我的博客模板,每篇文章都有这样的HTML: <div class="box"> <div class="box2"> <div class="box-main2"><div class="hole"></div> <div class="post"></div> <div style=
<div class="box">
<div class="box2">
<div class="box-main2"><div class="hole"></div>
<div class="post"></div>
<div style="width:100%; height: 32px; padding-top: 0px; position: relative ;">
<div class="btn" style="float:left;">more...</div>
<div class="info-box" style="float:right;">
<div><span class="date">2013, March, 3</span><span class="author">Komeyl</span><span class="comment"><sup>23</sup></span></div>
</div>
</div>
</div>
<div class="box-bottom" >
<div id="commentPanel">
</div>
<div class="box-bottom2"></div>
</div>
</div>
</div>
box-bottom2类是框的底部图片,应该随commentPanel出现和消失。
或更短的代码
[编辑] 试试这个:
$('span.comment').click(function(){
$(this).closest('.box2').find('#commentPanel,.box-bottom2').slideToggle();
});
将
style=“display:none”
添加到commentPanel,使其在加载时不可见您使用的jQuery版本是什么?
(function ($) {
$.fn.clickToggle = function (func1, func2) {
var funcs = [func1, func2];
this.data('toggleclicked', 0);
this.click(function () {
var data = $(this).data();
var tc = data.toggleclicked;
$.proxy(funcs[tc], this)();
data.toggleclicked = (tc + 1) % 2;
});
return this;
};
}(jQuery));
$('.comment').clickToggle(function () {
$(this).addClass('click');
$(this).parents('.box-main2').next('.box-bottom').find('#commentPanel').slideDown(300).next('.box-bottom2:first').show(100);
},
function () {
$(this).removeClass('click');
$(this).parents('.box-main2').next('.box-bottom').find('#commentPanel').slideUp(200).next('.box-bottom2:first').hide(100);
});
$('.comment').click(function () {
$(this).toggleClass('click');
$(this).parents('.box-main2').next('.box-bottom').find('#commentPanel').slideToggle(300).next('.box-bottom2:first').toggle(100);
});
$('span.comment').click(function(){
$(this).closest('.box2').find('#commentPanel,.box-bottom2').slideToggle();
});