鍍金池/ 問答/HTML/ JS如何在點(diǎn)擊網(wǎng)頁其他地方的時(shí)候,收起菜單導(dǎo)航欄?

JS如何在點(diǎn)擊網(wǎng)頁其他地方的時(shí)候,收起菜單導(dǎo)航欄?

問題描述

菜單欄定位在body的最右邊,隱藏方式是 right:-135px; 點(diǎn)擊按鈕的時(shí)候再把right:0;這樣顯示.
關(guān)閉的時(shí)候再把right:-135px;達(dá)到隱藏關(guān)閉的效果.現(xiàn)在還想要實(shí)現(xiàn)的是點(diǎn)擊菜單欄以外網(wǎng)頁的其他地方的時(shí)候也能達(dá)到隱藏關(guān)閉的效果該如何實(shí)現(xiàn)???順便想問一下,我這樣操作菜單欄的顯示和隱藏這種方法合適嗎?

問題出現(xiàn)的環(huán)境背景及自己嘗試過哪些方法

嘗試過用$(document).click(function(){...})
但沒有效果

相關(guān)代碼

// 請把代碼文本粘貼到下方（請勿用圖片代替代碼）

// 導(dǎo)航按鈕的操作
$("#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");
})

你期待的結(jié)果是什么？實(shí)際看到的錯(cuò)誤信息又是什么？

想要在鼠標(biāo)點(diǎn)擊網(wǎng)頁其他地方的時(shí)候可以關(guān)閉正在顯示的菜單欄...

回答
編輯回答
久舊酒

布局好導(dǎo)航div的位置,初始化隱藏；

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

//點(diǎn)擊顯示
$("#nav_open").click(function(){
    $("#nav_big_div").show();
})

//網(wǎng)頁點(diǎn)擊任意位置隱藏

$(“body”).on("click",function(){
  if($("#nav_big_div").show()){
      $("#nav_big_div").hide();
      }
      //或者模擬點(diǎn)擊
      //$("#nav_close").click()
})
2018年7月1日 15:48
編輯回答
心沉

我不太確定 $(document) 是什么，理論上這里應(yīng)該用 $(document.body)，它才是窗口里你看到的部分。然后偵聽點(diǎn)擊事件，后面進(jìn)行處理。另外你最好判斷一下點(diǎn)擊是不是在菜單里，以及不要用多個(gè) .css()，我不記得 jquery 會(huì)緩存結(jié)果，這樣做可能帶來性能或未預(yù)期的問題：

const nav = $('#nav_big_div');
$(document.body).click(event => {
  if ($.contains(event.target, nav[0])) {
    return;
  }
  nav.addClass('hide');
});
2018年3月10日 20:19
編輯回答
不二心
$(document).click(function(){
    if($("#nav_big_div").css("right")!=0){
        $("#nav_close").trigger('click');
        
    }else{
        $("#nav_open").trigger('click');
    }
})
2017年1月31日 05:41