单击后隐藏导航菜单

Question

我构建了一个效果很好的导航菜单，但它一直保持打开状态，直到鼠标移出下拉列表。

当我们在菜单中选择某些内容并且我试图让它同时隐藏菜单时，我已经有了一个在另一个<div>（otherDiv）中显示内容的功能。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

你可以帮我解决这个问题吗？

Answer 1

嗯......如果你在这里使用jquery，那么如何在菜单外单击一下后隐藏导航菜单就是一个例子。只需使用<Style x:Key="IconStyle" TargetType="Image"> <Style.Resources> <Style TargetType="ToolTip" BasedOn="{StaticResource BorderedInfoTooltip}" /> </Style.Resources> ... 向class="menu"添加<div>，尝试示例并根据父类名称构建自己的逻辑...

id="menu"

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

我相信你的回归是在错误的地方。如果在函数中间返回，则不会执行任何后续操作。你的代码应该像我上面的那样。