Question

我有以下代码。当我点击某个按钮时，我想让我的内容滑动。一切都很完美。唯一的问题是，如果我有像这样的多个html内容，它们都会同时打开。尝试做许多不同的方法，没有什么真正有效。

HTML

<div class="show_hide oh db w1-ha pr">
    <div class="w1-ha db oh left"> 
        <span  dataleave="" class="click left db oh btn green-btn">Reply</span>
    </div>
    <div class="show_" style="display: none;">
        Hidden message
    </div>
</div>

的jQuery

$('.show_hide span.click').click(function() {
        var thiz = $(this);

        $('.show_hide .show_').slideToggle(300, function() {
            $(this).toggleClass('active');
            thiz.toggleClass('active');

            var thiz_ = $('.show_hide span.click.active');
            var getHtmlBtn = thiz_.html();

            if($(this).hasClass('active')) {
                $('.show_hide').addClass('active');
                thiz_.attr('dataleave', getHtmlBtn).html('Hide');
            } else {
                $('.show_hide').removeClass('active');
                var data__ = thiz_.attr('dataleave');
                thiz_.html(data__);
            }
        });
    });

Answer 1

改变这个：

 $('.show_hide .show_').slideToggle(300, function() {

到此：

  thiz.closest('.show_hide').find('.show_').slideToggle(300, function() {

您需要在选择器的上下文中找到元素。因此var thiz是单击的span，您可以遍历最近的父级，然后您可以找到要滑动的元素。

根据您的最新评论，您可以更新为：

$('.show_hide span.click').click(function () {
    var thiz = $(this),
        getHtmlBtn; // put a global var here

    thiz.closest('.show_hide').find('.show_').slideToggle(300, function () {
        $(this).toggleClass('active');
        thiz.toggleClass('active');

        var thiz_ = $('.show_hide span.click.active');
        getHtmlBtn = thiz.text(); // update here

        if ($(this).hasClass('active')) {
            $('.show_hide').addClass('active');
            thiz_.attr('dataleave', thiz.text()).text('Hide');
        } else {
            getHtmlBtn = thiz.attr('dataleave'); // and again here;
            thiz.text(getHtmlBtn)
            $('.show_hide').removeClass('active');
        }
    });
});

jQuery toggleSlide：显示/隐藏块

1 个答案:

Fiddle