JS如何在点击网页其他地方的时候,收起菜单导航栏?

Question

问题描述

菜单栏定位在body的最右边,隐藏方式是 right:-135px; 点击按钮的时候再把right:0;这样显示.
关闭的时候再把right:-135px;达到隐藏关闭的效果.现在还想要实现的是点击菜单栏以外网页的其他地方的时候也能达到隐藏关闭的效果该如何实现???顺便想问一下,我这样操作菜单栏的显示和隐藏这种方法合适吗?

问题出现的环境背景及自己尝试过哪些方法

尝试过用$(document).click(function(){...})
但没有效果

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）

// 导航按钮的操作
$("#nav_open").click(function(){
    $("#nav_big_div").css("right","0");
    $("#nav_big_div").css("transition",".5s");
})
$("#nav_close").click(function(){
    $("#nav_big_div").css("right","-350px");
})

你期待的结果是什么？实际看到的错误信息又是什么？

想要在鼠标点击网页其他地方的时候可以关闭正在显示的菜单栏...

Answer 1

布局好导航div的位置,初始化隐藏；

//初始隐藏
$(document).ready(function () {
   $("#nav_big_div").hide();
}

//点击显示
$("#nav_open").click(function(){
    $("#nav_big_div").show();
})

//网页点击任意位置隐藏

$(“body”).on("click",function(){
  if($("#nav_big_div").show()){
      $("#nav_big_div").hide();
      }
      //或者模拟点击
      //$("#nav_close").click()
})

Answer 2

$(document).click(function(){
    if($("#nav_big_div").css("right")!=0){
        $("#nav_close").trigger('click');
        
    }else{
        $("#nav_open").trigger('click');
    }
})

Answer 3

我不太确定 $(document) 是什么，理论上这里应该用 $(document.body)，它才是窗口里你看到的部分。然后侦听点击事件，后面进行处理。另外你最好判断一下点击是不是在菜单里，以及不要用多个 .css()，我不记得 jquery 会缓存结果，这样做可能带来性能或未预期的问题：

const nav = $('#nav_big_div');
$(document.body).click(event => {
  if ($.contains(event.target, nav[0])) {
    return;
  }
  nav.addClass('hide');
});