Question

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

除非在已经打开另一个按钮时双击按钮，否则该部分效果很好。然后它将关闭链接到单击的按钮。如果您点击另一个按钮，它将打开链接到该按钮以及您双击的上一个按钮。

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

$(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/

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

非常感谢您的帮助。

Answer 1

试试这个。

$(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/

Answer 2

$(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/

双击按钮使用slidetoggle（）

2 个答案: