單擊后隱藏導航菜單

Question

我構建了一個導航菜單，該菜單運行良好，但是一直保持打開狀態，直到鼠標移出下拉菜單為止。

當我們在菜單中選擇某些內容時，我已經有一個函數可以在另一個<div> （otherDiv）中顯示內容，而我試圖讓它同時隱藏菜單。

 function go(obj) { var page = obj.href; document.getElementById('otherDiv').innerHTML = '<img src="' + page + '"></img>' return false; document.getElementById('menu1').style.display = "none"; document.getElementById('menu2').style.display = "none"; document.getElementById('menu3').style.display = "none"; document.getElementById('menu4').style.display = "none"; document.getElementById('menu5').style.display = "none"; document.getElementById('menu6').style.display = "none"; } 

  .drpbtn { display: inline-block; color: #ffffff; text-align: center; padding: 12px 25px; list-style-type: none; width: auto; margin: 0; background-color: #403e3e; color: #ffffff; float: left; font-family: arial; font-size: 14px; } .drpbtn:hover { background-color: #00b3be; } .drpbtn:hover .dropdown-content { display: inline-block; } .dropdown-content { display: none; list-style-type: none; position: absolute; background-color: #fafafa; width: 290px; color: #000000; text-align: left; margin-left: -4.7em; margin-top: 0.89em; } .dropdown-content li:hover { background-color: #e1e1e1; } .dropdown-content li { display: block; } .li-drop { display: inline-block; color: #000000; text-align: left; padding: 11px 13px; text-decoration: none; margin: auto; } 

 <div id="menu"> <ul> <li class="drpbtn">Menu 1 <ul id="menu1"> <div class="dropdown-content"> <li class="li-drop"> <a href="url" onclick="return go(this);"> <div class="div-drop">Choice 1</div> </a> </li> <li class="li-drop"> <a href="url" onclick="return go(this);"> <div class="div-drop">Choice 2</div> </a> </li> <li class="li-drop"> <a href="url" onclick="return go(this);"> <div class="div-drop">Choice 3</div> </a> </li> </div> </ul> </li> <li class="drpbtn">Menu 2 <ul id="menu2"> <div class="dropdown-content"> <li class="li-drop"> <a href="url" onclick="return go(this);"> <div class="div-drop">Choice 1</div> </a> </li> <li class="li-drop"> <a href="url" onclick="return go(this);"> <div class="div-drop">Choice 2</div> </a> </li> <li class="li-drop"> <a href="url" onclick="return go(this);"> <div class="div-drop">Choice 3</div> </a> </li> </div> </ul> </li> <li class="drpbtn">Menu 3 <ul id="menu3"> <div class="dropdown-content"> <li class="li-drop"> <a href="url" onclick="return go(this);"> <div class="div-drop">Choice 1</div> </a> </li> <li class="li-drop"> <a href="url" onclick="return go(this);"> <div class="div-drop">Choice 2</div> </a> </li> <li class="li-drop"> <a href="url" onclick="return go(this);"> <div class="div-drop">Choice 3</div> </a> </li> </div> </ul> </li> </ul> </div> 

你能幫我解決這個問題嗎？

Answer 1

好吧...如果您使用的是jQuery，這是一個在菜單外單擊后如何隱藏導航菜單的示例。 只需使用id="menu"將class="menu"添加到您的<div> ，嘗試該示例並根據父類的名稱建立自己的邏輯...

<script>
    $(document).click(function (e) {
        var $e = $(e.target);
        if (!$e.parents().hasClass('menu')) {
           $('.menu').css({ 'display': 'none' });
        }
    });
</script>

Answer 2

function go(obj) {
  var page = obj.href;
  document.getElementById('otherDiv').innerHTML = '<img src="' + page + '"></img>'
  document.getElementById('menu1').style.display = "none";
  document.getElementById('menu2').style.display = "none";
  document.getElementById('menu3').style.display = "none";
  document.getElementById('menu4').style.display = "none";
  document.getElementById('menu5').style.display = "none";
  document.getElementById('menu6').style.display = "none";
  return false;
}

我相信您的返回錯誤地點。 如果在函數中間返回，則之后將不執行任何操作。 您的代碼應與我上面的代碼相同。