-1

这是我的一个博客模板，每篇文章都有这个 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 因为会有很多comment 和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 出现和消失的框的底部图片。

4

2 回答 2

0

工作演示

(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);
});
于 2013-08-03T16:09:37.557 回答
0

[编辑]

试试这个：JSFiddle

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

添加style="display:none"到评论面板以使其在加载时不可见

于 2013-08-03T16:19:48.880 回答