Question

我创建了一个不使用jquery库的网站，只是简单的javascript。

大多数用户的互联网带宽较低，我尽量保持干净。

我只使用很少的功能，这就是我决定不使用jquery的原因。

我创建了这个折叠菜单，当用户点击它时会打开和关闭容器。我还想在用户点击它之外关闭它。我对javascript没有那么有经验，如果有人能给出一些想法，我会非常感激。

谢谢

function myFunction() {
    var x = document.getElementById("Demo");
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<div class="w3-container">
  <h2>Clickable Dropdown</h2>
  <p>Click on the button to open the dropdown menu.</p>
  <div class="w3-dropdown-click">
    <button onclick="myFunction()" class="w3-button w3-black">Click Me!</button>
    <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
  </div>
</div>

Answer 1

要检测元素外部的点击，您需要捕捉身体本身的点击次数：

＆＃13;

function myFunction(t) {
    var x = document.getElementById("Demo");
    if (t && x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
    event.stopPropagation();
}

＆＃13;

<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"/>
<body onclick="myFunction()">
<div class="w3-container">
  <h2>Clickable Dropdown</h2>
  <p>Click on the button to open the dropdown menu.</p>
  <div class="w3-dropdown-click">
    <button onclick="myFunction(true)" class="w3-button w3-black">Click Me!</button>
    <div id="Demo" class="w3-dropdown-content w3-bar-block w3-border">
      <a href="#" class="w3-bar-item w3-button">Link 1</a>
      <a href="#" class="w3-bar-item w3-button">Link 2</a>
      <a href="#" class="w3-bar-item w3-button">Link 3</a>
    </div>
  </div>
</div>
</body>

＆＃13;

注意：我已经引入了论证＆＃34; T＆＃34;表明我是否想要＆＃34;切换＆＃34;菜单或隐藏它。

如何通过单击外部关闭下拉菜单？

1 个答案: