JQuery disable link/click function not working properly

Question

Im trying to make a menu with 2 links with submenu's. The 2 links are disabled by default. When you click on the first link the submenu should show and the link is enabled. This works properly. But when you click on the second link the "first" link should reset (first link should disable). This is the thing that is not working. After the 2nd link is clicked the first link isn't doing anything at all when clicked. Could somebody help me out with that? I posted the code below.

Thanks in advance.

<div id="menu">
    <ul>
        <li><a class="link1" href="link1.html">link1</a></li>
        <li><a class="link2" href="link2.html">link2</a></li>
    </ul>
</div>
<div id="submenu">
    <li><a href="link.html">link</a></li>
    <li><a href="link.html">link</a></li>
    <li><a href="link.html">link</a></li>
</div>
<div id="submenu2">
    <li><a href="link.html">link</a></li>
    <li><a href="link.html">link</a></li>
    <li><a href="link.html">link</a></li>
</div>

<script type="text/javascript">

    $(document).ready(function () { 
        $(".link2, .link1").bind("click", function(e){
            e.preventDefault();
        })

        $( ".link2" ).click(function() {
            $( "#submenu").delay(300).fadeIn();
            $(".link2").unbind("click");
            $( "#submenu2").fadeOut();
            $(".link1").bind("click", function(e){
                e.preventDefault();
            })
        })

        $( ".link1" ).click(function() {
            $( "#submenu2").delay(300).fadeIn();
            $(".link1").unbind("click");
            $( "#submenu").fadeOut();
            $(".link2").bind("click", function(e){
                e.preventDefault();
            })
        })
    });
</script>

Answer 1

Why do you want to unbind the click events ?

I guess you don't want the animation to start again. But, you got to know that the fadeIn and fadeOut will not. If the element is already shown, the fadeIn will do nothing. Neither the fadeOut if the element is already hidden.

And you should use the fadeOut callback function, instead of delay(300). It is nicer.

Then, you could simply do :

$( ".link1" ).click(function(e) {
    $( "#submenu2").fadeOut(function(){
        $( "#submenu").fadeIn();
    });
    e.preventDefault();
}); 

$( ".link2" ).click(function(e) {
    $( "#submenu").fadeOut( function(){
          $( "#submenu2").fadeIn(); 
    });
    e.preventDefault();
}); 

See the jsFiddle

---

If you really want to block a second click on the same link, you got to use a flag to save the element state. Save it in the dataset of each submenu.

With something like that :

$( ".link1" ).click(function(e) {
    if (!$("#submenu").data('visible')) {
        $( "#submenu2").fadeOut( function(){
            $( "#submenu").fadeIn().data('visible',true);
        }).data('visible',false);
    }
    e.preventDefault();
}); 

$( ".link2" ).click(function(e) {
    if (!$("#submenu2").data('visible')) {
        $( "#submenu").fadeOut(function(){
            $( "#submenu2").fadeIn().data('visible',true);
        }).data('visible',false);
    }
    e.preventDefault();
}); 

See this other jsFiddle

You could use the .is(":hidden") selector, but it will fail if the click appends while the last animation is still running.