Question

原始问题：

我有以下脚本：

http://jsfiddle.net/mnXdv/12/

效果很好，但我需要额外增加一点。

我需要在第二次点击活动导航时显示警告。

例如，如果单击nav1以激活下拉列表，如果再次单击nav1，则应显示警报，如果在nav1处于活动状态时单击页面的其他部分，则不应显示警报。

此外，如果nav1处于活动状态且nav2已激活，则不应显示任何警报。但是，当nav2处于活动状态时，如果再次单击nav2，则应显示警告。

很抱歉关闭上一个与此类似的问题，它有一个基本问题。

编辑1：

脚本的所有其余原始行为必须保持不变。

Answer 1

这是一个（略微）凌乱的答案。问题是您还以编程方式触发两个click元素上的navX，因此单击以关闭一个元素也会导致在另一个元素上接收事件。我的解决方案涉及使用trigger ed事件发送额外的数据，并修改处理程序，以便在事件以编程方式生成时表现不同。我不知道有什么方法可以区分用户启动和代码触发的事件，但如果有办法，那就更清晰了。

注意我已将click()次调用的位置修改为trigger('click', true);。我也updated the fiddle所以你应该可以尝试一下。

    $(document).ready(function(){
    $(document).click(function(event) {
        $('.nav1.active, .nav2.active').trigger('click', true);
        $('.nav1, .nav2').removeClass("active");
    });

    $('.dropdown').each(function() {
        $(this).css('left', $(this).prev().position().left);
    });

    $('.nav1, .nav2').click(function(event, isTrigger) {
        $(this).siblings('.nav1.active, .nav2.active').trigger('click', true);

        if(!isTrigger && $(this).hasClass('active')){
                alert("Is Active");
        }

        $(this).toggleClass('active').next().toggle();
        event.stopPropagation();
    });

    $('.nav1, .nav2').disableSelection();

    $('.item').click(function() {
        $(this).parent().toggle();
        $('.nav1.active, .nav2.active').removeClass('active');
    });
});

Answer 2

好吧我不确定这是否是“正确的”解决方案但是它有效，我使用事件属性originalEvent知道何时从GUI触发事件以及何时从代码中触发：

$('.nav1, .nav2').click(function(event) {
    if (typeof event.originalEvent != "undefined") {
        if (this.data_clicked) {
            if ($(this).hasClass('nav1'))
                alert("I'm the happy icon Home!");
            else if($(this).hasClass('nav2'))
                alert("I'm the sad icon Phone");
            $(this).click();
            return(false);
        }
        this.data_clicked = true;
    } else {
        this.data_clicked = false;
    }
    if (typeof event == "undefined")
        alert("HAAA HAAA!");
    $(this).siblings('.nav1.active, .nav2.active').click();
    $(this).toggleClass('active').next().toggle();
    event.stopPropagation();
});

编辑：尝试一下，现在在显示警告后关闭菜单 编辑2：好了现在它显示了一条不同的消息，我不太喜欢hasClass条件，但我认为在这种情况下它是最好的。
在这里，您拥有最新的工作版本，测试它并查看是否具有您想要的行为。
http://jsfiddle.net/mnXdv/48/

如果激活则显示警报

2 个答案: