如果激活则显示警报

时间:2011-03-10 14:33:47

标签: jquery

原始问题:

我有以下脚本:

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

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

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

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

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

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

编辑1:

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

2 个答案:

答案 0 :(得分: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');
    });
});

答案 1 :(得分:0)

好吧我不确定这是否是“正确的”解决方案但是它有效,我使用事件属性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/