如何在jQuery中选择深跨元素?

如何在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=

这是我的博客模板,每篇文章都有这样的HTML:

        <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();
});