Question

我有一个使用JavaScript的下拉菜单。它在Firefox（版本57）中可靠地运行。但是，在Chrome（版本62）中，只有首先单击页面上的其他位置，然后单击菜单图标/按钮，才会显示下拉菜单。我使用的是jQuery 3.2.1和Bootstrap 2.3.2。

var shown;

$(function() {
  shown = false;
});

window.onclick = function(event) {
  if (event.target.id == "button") {
    if (shown)
      $("#dropdown").hide();
    else
      $("#dropdown").show();
    shown = !shown;
  } else if (shown) {
    $("#dropdown").hide();
    shown = false;
  }
}

.dropdown {
  display: none;
  float: right;
  right: 0;
  margin-right: 7px;
  position: absolute;
  z-index: 1;
}

.dropdown a {
  padding: 12px 16px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="icon">
  <button id="button">
    <img src="cogwheel.png">
  </button>
  <div id="dropdown" class="dropdown">
    <a href="todo2">Register</a>
    <a href="todo1">Login</a>
  </div>
</div>

Answer 1

我已经测试了Chrome 62和Firefox 57中提供的代码。我无法重现您描述的行为：

...在Chrome（第62版）中，只有首先点击页面上的其他位置，然后点击菜单图标/按钮
，才会显示下拉菜单

但是，当您点击<img>内的<button>时会出现问题，该<img>是由#button作为Chrome中的事件目标引起的。您可以通过更改条件来检查这一点，以检查if (event.target.id == "button")是否为目标本身或目标的父节点。

所以将if (event.target.id == "button" || event.target.parentNode.id == "button")更改为var shown; $(function() { shown = false; }); window.onclick = function(event) { if (event.target.id == "button" || event.target.parentNode.id == "button") { if (shown) $("#dropdown").hide(); else $("#dropdown").show(); shown = !shown; } else if (shown) { $("#dropdown").hide(); shown = false; } }。

.dropdown {
  display: none;
  float: right;
  right: 0;
  margin-right: 7px;
  position: absolute;
  z-index: 1;
}

.dropdown a {
  padding: 12px 16px;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="icon">
  <button id="button">
    <img src="cogwheel.png">
  </button>
  <div id="dropdown" class="dropdown">
    <a href="todo2">Register</a>
    <a href="todo1">Login</a>
  </div>
</div>

UnitySendMessage

下拉菜单在Firefox中运行良好，但在Chrome中不可靠

1 个答案: