Question

我目前有一个非常简单的jquery函数，如果按下菜单，则会显示菜单。

$(".menu").on("click", function( event ){
   $(".menulist").css("display","block");
   alert(event);
})

如果再次点击菜单按钮或点击菜单，我想再显示一次。

我已经尝试了如下关闭功能，但后来意识到它无论如何都不会起作用：

$(".menu").off("click", function(){
   $(".menulist").css("display","none");     
})

有关如何做到这一点的任何建议？如果它对移动网站有帮助那么

编辑：事件在第一个函数中，因为我认为我可以使用此事件来判断项目是否已经显示。不管是那个还是另一个，我会更好（“点击”函数（）来检查.menu的显示的css值是否等于block或none然后从那里改变css？这将解决点击到菜单按钮但不关闭菜单

Answer 1

$(".menu").on("click", function( event ){
   $(".menulist").toggle();
})

Answer 2

使用$(".menu").on("click", function(){ $('.menulist').toggle() });切换菜单列表的可见性。

<强>更新

要在单击off菜单元素时关闭菜单，只需捕捉body标签上的click事件，然后关闭菜单（如果它已打开）：

整个代码段看起来像这样：

$('.menu').on('click', function(){ 
    $('.menulist').toggle();
});

$('body').on('click', function(e){
    if(!$(e.target).hasClass('.menu') && $('.menulist').is(':visible')) {
        $('.menulist').hide();
    }
});

Answer 3

尝试使用jQuery的toggle方法：

$(".menu").on("click", function() {
    $(".menulist").toggle();
});

Answer 4

$(".menu").on("click", function( event ){
   if($(".menulist:visible"))
   {
     $(".menulist").css("display","none");
    }else{
     $(".menulist").css("display","block");
   }
});

Answer 5

就像简单

$(".menu").on("click", function( event ){
   $(".menulist").toggle();
});

Answer 6

$(".menu").on("click", function(){
    var $menulist = $(".menulist");
    $menulist.toggle($menuList.is(":visible"));
}

Answer 7

不推荐使用toggle()函数：

$(".menu").on("click", function( event ){
   if( $(".menulist").css("display")!="none")
    {
       $(".menulist").css("display","none");
    }
    else{
      $(".menulist").css("display","block");
   }
});

Jquery on（“点击”，功能事件

7 个答案: