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

問(wèn)題描述

菜單欄定位在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)頁(yè)的其他地方的時(shí)候也能達(dá)到隱藏關(guān)閉的效果該如何實(shí)現(xiàn)???順便想問(wèn)一下,我這樣操作菜單欄的顯示和隱藏這種方法合適嗎?

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

嘗試過(guò)用$(document).click(function(){...})
但沒(méi)有效果

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

想要在鼠標(biāo)點(diǎn)擊網(wǎng)頁(yè)其他地方的時(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)頁(yè)點(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)，它才是窗口里你看到的部分。然后偵聽(tīng)點(diǎn)擊事件，后面進(jìn)行處理。另外你最好判斷一下點(diǎn)擊是不是在菜單里，以及不要用多個(gè) .css()，我不記得 jquery 會(huì)緩存結(jié)果，這樣做可能帶來(lái)性能或未預(yù)期的問(wèn)題：

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