javascript - 单击后隐藏导航菜单

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

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;
}

我相信你的返回是在错误的地方。如果你在函数中间返回，后面的任何东西都不会被执行。你的代码应该和我上面的一样。