Question

所以我想制作一个按钮，当你点击它时它看起来很沮丧，当你再次点击它时它就不再了。虽然我也想要，但如果你点击按钮外的任何地方它也不会再看起来很沮丧。

到目前为止，这是我的JavaScript代码：

if($('#taskbar-start').hasClass('taskbar-start-active') === false){
    $('#taskbar-start').click(function() {
        alert($('#taskbar-start').hasClass('taskbar-start-active'))
        $(this).toggleClass('taskbar-start-active');
        $(this).children().toggleClass('taskbar-start-frame-active');
    });
}
$(document).mouseup(function() {
    if($('#taskbar-start').hasClass('taskbar-start-active')){
        alert($('#taskbar-start').hasClass('taskbar-start-active'))
        $('#taskbar-start').removeClass('taskbar-start-active');
        $('#taskbar-start-frame').removeClass('taskbar-start-frame-active');
    }   
});

使用该代码时，单击按钮时按钮会被按下而单击其他任何位置时按下按钮会被按下，但是如果我单击按下按钮它会暂时不显示，然后再次按下（警报，没有警报）保持沮丧）。

我现在正在研究和尝试几个小时，我似乎无法找到我的问题。很抱歉，如果这个问题很愚蠢，我还是JavaScript / jQuery的新手，还在学习。

Answer 1

首先，按F12并开始使用开发人员工具，而不是警报。其次，使用console.log代替警报，您可以在console下找到的其他一组有用的命令（如console.time和console.timeEnd）将显示在控制台选项卡中。第三，问题是$(document).mouseup函数会在您mouseup整个document时调用，其中包括您的按钮。当元素单击是按钮时，您应该排除该函数。

你的方法很好。点击按钮时，我停止了他的传播，正如@MhhhamadImran所说，但是将mouseup更改为click以使其正常工作。

$(document).ready(function(){
    if($('#taskbar-start').hasClass('taskbar-start-active') === false) {
        $('#taskbar-start').click(function(event) {
            event.stopPropagation();
            $(this).toggleClass('taskbar-start-active');
            $(this).children().toggleClass('taskbar-start-frame-active');
        });
        $(document).click(function() {
            if($('#taskbar-start').hasClass('taskbar-start-active')){
                $('#taskbar-start').removeClass('taskbar-start-active');
                $('#taskbar-start-frame').removeClass('taskbar-start-frame-active');
            }
        });
    }
});

请记住，在网络开发时，F12是你的朋友。

Answer 2

单击按钮时停止事件冒泡，使其不冒泡到文档以重新启动事件/类，

下面是更正后的代码，按钮点击功能中只添加了一行

if($('#taskbar-start').hasClass('taskbar-start-active') === false){
        $('#taskbar-start').click(function(event) {
            event.stopPropagation()
            alert($('#taskbar-start').hasClass('taskbar-start-active'))
            $(this).toggleClass('taskbar-start-active');
            $(this).children().toggleClass('taskbar-start-frame-active');
        });
    }
    $(document).mouseup(function() {
        if($('#taskbar-start').hasClass('taskbar-start-active')){
            alert($('#taskbar-start').hasClass('taskbar-start-active'))
            $('#taskbar-start').removeClass('taskbar-start-active');
            $('#taskbar-start-frame').removeClass('taskbar-start-frame-active');
        }   
    });

jQuery Button可以点击和取消点击，但如果你点击其他任何地方也会被取消点击

2 个答案: