display an alert if active

ORIGINAL QUESTION:

I have the following script:

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

It works well, but I need to add a little extra too it.

I need to display an alert when an active nav is clicked a second time.

For example, if nav1 is clicked to activate the dropdown, if nav1 is clicked again, it should display an alert, If some other part of the page is clicked when nav1 is active, it should not display an alert.

Also, if nav1 is active and nav2 is activated, no alert should be displayed. However, when nav2 is active, and if nav2 is clicked again, it should display an alert.

Sorry for closing the previous question which was similar开发者_如何学C to this, it had a fundamental issue with it.

EDIT 1:

All the rest of the original behaviour of the script must remain intact.

---

Here's a (slightly) messy answer. The problem is that you're also programmatically triggering the click on the two navX elements so a click to close one also causes an event to be received on the other. My solution involves sending a extra piece of data with the triggered event and modify the handler to behave differently if the event originated programmatically. I'm not aware of any way to differentiate user-initiated and code-triggered events but if there is a way, that would be much cleaner.

Note I've modified your click() invocations in two places to trigger('click', true);. I've also updated the fiddle so you should be able to try this out.

    $(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');
    });
});

---

Okay I'm not sure if this is the "correct" solution but it works, I use the event property originalEvent to know when an event has been fired from the GUI and when from the code:

$('.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();
});

EDIT: Try it, now it close the menu after showing the alert.
EDIT 2: Ok now it shows a different message, I don't like very much the hasClass conditionals but I think it's the best in this case.
Here you have the lastly new working version, test it and look if have the behavoir that you want.
http://jsfiddle.net/mnXdv/48/