Jquery菜单第一次单击显示第二次单击隐藏菜单

这是我的Jquery Ajax菜单代码

$(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>

$（文档）.ready（函数（）{
$（#electronics'）。在（'click'，函数（e）{
$.ajax({
url:'in_megaM.php'，
类型：'POST'，
cache:false，
数据：'electronics=yes'，
成功：功能（数据）{
$（“#显示菜单”）.show（）；
$（'#showmenus'）.html（数据）；
}
});
});
});
$（文档）.on（'单击'，函数（e）{
如果（$（e.target）.closest（'#showmenus'）。长度===0）{
$（“#显示菜单”）.hide（）；
}
});
$（文档）.on（'keydown'，函数（e）{
如果（e.keyCode==27）{//ESC
$（“#显示菜单”）.hide（）；
//警报（1）；
}
});

---

问题是当我点击电子标签时，菜单打开了。我再次点击电子标签，菜单没有隐藏，而是再次打开

您可以尝试使用一个简单的整数来检查菜单：

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

我将这个变量命名为

缓冲区

另外，请更改AJAX请求的参数以匹配初始代码。我做了一些编辑来在JSFIDLE上测试它。
我不知道为什么您在那里有PHP，我希望您没有将它发送到服务器上执行，但它正在做您让它做的事情，当单击“电子”选项卡时，文档也是如此。这就是它关闭和重新打开的原因。（当然，ajax调用就是您可以看到切换的原因。）

尝试以类或数据属性的形式添加切换标志

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

$（'#electronics'）。在（'click'，函数（e）{
if（menus.hasClass（'open'））{
菜单。隐藏（）；
菜单。removeClass（“打开”）；
}否则{
$.ajax({
url:'in_megaM.php'，
类型：'POST'，
cache:false，
数据：'electronics=yes'，
成功：功能（数据）{
变量菜单=$（“#显示菜单”）；
菜单。show（）；
html（数据）；
menus.addClass（'open'）；
}
});
}
});
$（文档）.on（'单击'，函数（e）{
如果（$（e.target）.closest（'#showmenus'）。长度===0）{
$（“#显示菜单”）.removeClass（'open'）；
$（“#显示菜单”）.hide（）；
}
});
$（文档）.on（'keydown'，函数（e）{
如果（e.keyCode==27）{//ESC
$（“#显示菜单”）.removeClass（'open'）；
$（“#显示菜单”）.hide（）；
//警报（1）；
}
});

请注意，当您通过其他方法关闭标志时，需要将其设置为关闭。如果您只是简单地关闭菜单，这将完全阻止进行AJAX调用。
您可以使用一个类作为其打开状态，并使用“target”属性来标识特定的div。一旦有多个下拉列表，这一点很重要。下面是一个用一个div完成任务的基本示例。用多个div完成任务有点棘手，这是我留给读者的练习，在打开多个下拉菜单时不要忘记隐藏其他打开的div

<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>


$（函数（）{
$（'.showme'）。单击（函数（）{
var target=$（this.attr（'target'））
var targid=$（“#”+目标）
if（$（targetId）.hasClass（'open'）==true）
{
var QueryString={$（this.attr（'extra-data'）：yes}；
$.post（'/echo/html/'，查询字符串，函数（数据）{
如果（数据）
{
//随便这里
}
})
$（targetId）.hide（100，函数（）{
$（targetId）.toggleClass（'open'）
})
}否则{
$（targetId）.show（100，函数（）{
$（“#“+targetId”）.toggleClass（'open'））
})
}
})
})








它是否再次隐藏和打开？还是保持打开状态，好像什么都没发生一样？使用状态变量，在打开菜单时更改它，然后在下一步中单击检查状态变量，并执行正确的移动。为它添加一个条件，例如，当菜单打开时i=1，当菜单打开时i=closeclose@EricWu它正在隐藏并再次打开。您必须使用切换功能很好，对我来说很有用。谢谢你的编码想法。