Jquery Menu First Click to Show second click to hide the menu

Question

Here is my Jquery Ajax Menu Code.

$(document).ready(function(){    
    $('#electronics').on('click',function(e){   

        $.ajax({
                    url:'<?php echo HTTP; ?>in_megaM.php',
                    type:'POST',
            cache:false,
                    data: 'electronics=yes',
            success:function(data){
            $('#showmenus').show();
            $('#showmenus').html(data); 
            }

        });
    });
});

$( document ).on( 'click', function ( e ) {
    if ( $( e.target ).closest('#showmenus').length === 0 ) {
        $('#showmenus').hide();
    }
});


$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        $('#showmenus').hide();
    //alert(1);
    }
});

<ul class="menu"> 
<li class="nodrop"><a href="<?php echo HTTP; ?>"><span class="homeIC">&nbsp;</span></a></li>
<li class="nodrop"><a href="#" id="electronics">Electronics</a></li>    
<li class="nodrop"><a href="#" id="storage">Storage</a></li>
<li class="nodrop"><a href="#" id="entertainment">Entertainment</a></li>
<li class="nodrop"><a href="#" id="lifestyle">Lifestyle</a></li>    
<li class="nodrop"><a href="<?php echo HTTP; ?>coupons/coupons-home.php">Coupons</a></li>
</ul> 
<div id="showmenus"></div>

The problem is when i click on the electronics tab , the menu is opening. Again i click on the electronics tab the menu is not hiding..instead it is opening again.

Answer 1

you could use a class for its open state and the "target" attribute to identify the specific div. this is important once you have multiple drop downs. here is a basic example of accomplish the task with one div. doing it with multiple divs is a bit more tricky, and is an exercise i leave to the reader dont forget to hide the other open divs when opening a menu with multiple drop downs.

<script type="text/javascript">
    $(function(){


        $('.showme').click(function(){
        var target = $(this).attr('target')
        var targid = $('#'+target)
        if($(targid).hasClass('open') === true)
        {
            var QueryString = {$(this).attr('extra-data') : yes};
            $.post('/echo/html/', QueryString, function(data){
                if(data)
                {
                    //whatever here
                }
            })
            $(targid).hide(100,function(){
                $(targid).toggleClass('open')
            })
        }else{
            $(targid).show(100,function(){
                $("#"+targid").toggleClass('open')
            })
        }
    })
})
</script>
<ul class="menu" id="target1"> 
<li class="nodrop"><a href="<?php echo HTTP; ?>"><span class="homeIC">&nbsp;</span></a></li>
<li class="nodrop"><a href="#" id="electronics">Electronics</a></li>    
<li class="nodrop"><a href="#" id="storage">Storage</a></li>
<li class="nodrop"><a href="#" id="entertainment">Entertainment</a></li>
<li class="nodrop"><a href="#" id="lifestyle">Lifestyle</a></li>    
<li class="nodrop"><a href="<?php echo HTTP; ?>coupons/coupons-home.php">Coupons</a></li>
</ul> 
<div id="showmenus" target="target1" class="showme"></div>

Answer 2

I don't know why you have PHP in there, I hope you are not sending it to be executed on the server, but it is doing exactly what you told it to do, when the electronics tab is clicked, so is the document. That is why it closes and reopens. (Your ajax call is of course why you can see the switch.)

Try adding a toggle flag in the form of a class or data- attribute.

$('#electronics').on('click',function(e){   

    if (menus.hasClass('open')) {
        menus.hide();
        menus.removeClass('open');
    } else {
        $.ajax({
           url:'<?php echo HTTP; ?>in_megaM.php',
            type:'POST',
            cache:false,
            data: 'electronics=yes',
            success:function(data){
                var menus = $('#showmenus');
                menus.show();
                menus.html(data); 
                menus.addClass('open');
            }
        });
    }
});

$( document ).on( 'click', function ( e ) {
    if ( $( e.target ).closest('#showmenus').length === 0 ) {
        $('#showmenus').removeClass('open');
        $('#showmenus').hide();
    }
});


$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        $('#showmenus').removeClass('open');
        $('#showmenus').hide();
    //alert(1);
    }
});

Please note that you need to set the flag off when you close it through the other methods. This will prevent the AJAX call from being made at all if you are simply closing the menu.

Answer 3

You can try involving a simple integer to check on your menu:

$(document).ready(function(){    
    var buffer = 0;
    $('#electronics').on('click',function(e){   
            $.ajax({
                url:'/echo/html/',
                type:'POST',
                cache:false,
                data: {html: 'electronics=yes', delay: 1},
                success:function(data){
                    if(buffer == 0){
                        $('#showmenus').show();
                        $('#showmenus').html(data); 
                        buffer = 1;
                    } else {
                        buffer = 0;
                    }
                }
            });
    });
});
$( document ).on( 'click', function ( e ) {
    if ( $( e.target ).closest('#showmenus').length === 0 ) {
        $('#showmenus').hide();
        buffer = 0;
    }
});
$( document ).on( 'keydown', function ( e ) {
    if ( e.keyCode === 27 ) { // ESC
        $('#showmenus').hide();
        buffer = 0;
    //alert(1);
    }
});

I named this variable buffer.

Also, please change the parameters of your AJAX request to match your initial code. I made some edits to test it on JSFIDDLE.