使用slidetoggle(）双击按钮

double click button using slidetoggle()

本文关键字：双击 按钮 slidetoggle 使用      更新时间：2023-09-26

我遇到了一个小问题。我使用了一系列按钮，当按下这些按钮时，会关闭以前可见的，然后打开链接到该按钮的。

这部分工作得很好，除非你双击一个按钮，而另一个按钮已经打开。然后，它将关闭链接到单击的按钮。如果你点击另一个按钮，它将打开链接到该按钮的链接，再加上你双击的上一个按钮。

只有双击尚未激活的按钮时，才能创建此错误。

$(document).on('click', 'button', onButtonClick)
function onButtonClick() {
    target = $(this).attr('class')
    if ($('.active')[0]) {
        if(!$('.active').hasClass(target)) {
            $('.active').removeClass('active').slideToggle(function () {
                $('div.' + target).slideToggle().addClass('active')
            })
        }
    } else {
        $('div.' + target).slideToggle().addClass('active')
    }
}

这是我的小提琴：http://jsfiddle.net/78TRb/

我的问题是，有没有一种方法可以只允许单击按钮来消除我的错误，或者有更好的方法吗？

非常感谢你的帮助。

$(document).on('click', 'button', onButtonClick)
var clicked = false;
function onButtonClick() {
    if(clicked)
    {
        return;
    }
    target = $(this).attr('class')
    if ($('.active')[0]) {
        if(!$('.active').hasClass(target)) {
            clicked = true;
            $('.active').removeClass('active').slideToggle(function () {
                $('div.' + target).slideToggle().addClass('active') 
                clicked = false;
            })
        }
    } else {
        $('div.' + target).slideToggle().addClass('active')
        clicked = false;
    }
}

这是小提琴http://jsfiddle.net/78TRb/13/

试试这个。

$(document).on('click', 'button', onButtonClick)
function onButtonClick() {
    target = $(this).attr('class')
    if ($('.active')[0]) {
        if(!$('.active').hasClass(target)) {
            $('.active').removeClass('active').slideToggle(function () {
                $('div.' + target).slideToggle().addClass('active')
            })
        }
    } else {
        $('div.' + target).slideToggle().addClass('active')
    }
}

这是小提琴http://jsfiddle.net/78TRb/11/

相关文章：