Question

这是我的一个博客模板，每个帖子都有这个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>

我想在span标记中选择注释类，以便当用户点击它时，commentPanel类从框的底部向下滑动，并在下一次单击发生时向上滑动，这应该是每个注释类应该选择自己的commentPanel，因为会有很多注释和commentPanel类。我写了这个jQuery，但它不会按我想要的方式工作：

$('.comment').toggle(function(){
    $(this).addClass('click');
    $('.box-bottom #commentPanel').slideDown(300);
    $('.box-bottom2:first').show(100);
},function(){
    $(this).removeClass('click');
    $('.box-bottom #commentPanel').slideUp(200);
$('.box-bottom2:first').hide(100);
}
);

和box-bottom2类是该框的底部图片，应该与commentPanel一起出现和消失。

Answer 1

Working Demo

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

或更短的代码

DEMO

$('.comment').click(function () {
    $(this).toggleClass('click');
    $(this).parents('.box-main2').next('.box-bottom').find('#commentPanel').slideToggle(300).next('.box-bottom2:first').toggle(100);
});

Answer 2

<强> [编辑]

试试这个： JSFiddle

$('span.comment').click(function(){
    $(this).closest('.box2').find('#commentPanel,.box-bottom2').slideToggle();
});

将style="display:none"添加到commentPanel，使其在加载

时不可见

如何在jQuery中选择深度元素？

2 个答案: