Question

这是我的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>

问题是当我点击电子选项卡时，菜单正在打开。再一次，我点击电子选项卡菜单没有隐藏..而不是它再次打开。

Answer 1

我不知道为什么你有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);
    }
});

请注意，您需要在通过其他方法关闭标志时将其设置为关闭。如果您只是关闭菜单，这将阻止完成AJAX调用。

Answer 2

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

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

我将此变量命名为buffer。

另外，请更改AJAX请求的参数以匹配您的初始代码。我做了一些编辑，在JSFIDDLE上测试它。

Answer 3

您可以将一个类用于其打开状态，使用“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>

Jquery菜单首先单击以显示第二次单击以隐藏菜单

3 个答案: