当单击页面上的其他任何地方时，使下拉菜单返回

Make drop down menu go back up when clicking anywhere else on the page

本文关键字：方时 下拉菜单 返回 任何地 其他 单击      更新时间：2023-09-26

我在一个网站上做了一些工作，开发人员没有完成这项工作，所以我需要一些(可能)基本代码来完成这项工作。

基本上我需要一个下拉框回到一旦用户点击页面上的其他任何地方。目前，它只是保持下拉，直到您再次单击菜单项。

下面是我从网站上获取的代码:

<li class="gendb1" id="gnrl" onclick="gen();" >GENERAL</li>
<li class="gendb" id="dbid" onclick="Db();">D&B</li>
<script>
   function gen()
   {           
      var div = document.getElementById("txt");
      var txt = document.getElementById("txt2");
      if (div.style.height == "0px") {
         txt.style.height = "0px";
         div.style.height = "230px";
      }
      else {
         div.style.height = "0px";
      }   
   }
   function Db()
   {     
      var div = document.getElementById("txt2");
      var txt = document.getElementById("txt");
      if (div.style.height == "0px") {
         txt.style.height = "0px";
         div.style.height = "320px";
      }
      else {
         div.style.height = "0px";
      }           
   }
</script>
<div id="txt">
   <span style="display: block; margin-top: 29px;">Some text</span>
</div>
<div id="txt2">
   <span style="display: block; margin-top: 29px;">Some other text</span>   
</div>

任何帮助都太好了。谢谢你！

可能有许多方法可以完成此操作。下面的代码片段包含一个方法，当单击除"触发器"之外的任何内容时，该方法将"关闭"这些框。此代码还从列表项html代码中删除onclick="gen();"和onclick="Db();"脚本，并从JavaScript代码中删除不需要的后续函数。

希望对你有帮助。

// NEW JAVSCRIPT CODE
<script>
document.addEventListener("click", function dropToggle(event) {
  "use strict";
  var target = event.target || event.srcElement;
  var txtOne = document.getElementById("txt");
  var txtTwo = document.getElementById("txt2");
  var txtOneTrigger = "gnrl";
  var txtTwoTrigger = "dbid";
  var targetID = target.id;
  switch (targetID) {
    case txtOneTrigger:
      txtTwo.style.height = "0px";
      if (txtOne.style.height !== "0px") {
        txtOne.style.height = "0px";
      }
      else {
        txtOne.style.height = "290px";
      }
      break;
    case txtTwoTrigger:
      txtOne.style.height = "0px";
      if (txtTwo.style.height !== "0px") {
        txtTwo.style.height = "0px";
      }
      else {
       txtTwo.style.height = "320px";
      }
      break;
    default:
      txtOne.style.height = "0px";
      txtTwo.style.height = "0px";
      break;
  }
});
</script>


document.addEventListener("click", function dropToggle(event) {
  "use strict";
  var target = event.target || event.srcElement;
  var txtOne = document.getElementById("txt");
  var txtTwo = document.getElementById("txt2");
  var txtOneTrigger = "gnrl";
  var txtTwoTrigger = "dbid";
  var targetID = target.id;
  switch (targetID) {
    case txtOneTrigger:
      txtTwo.style.height = "0px";
      if (txtOne.style.height !== "0px") {
        txtOne.style.height = "0px";
      }
      else {
        txtOne.style.height = "290px";
      }
      break;
    case txtTwoTrigger:
      txtOne.style.height = "0px";
      if (txtTwo.style.height !== "0px") {
        txtTwo.style.height = "0px";
      }
      else {
       txtTwo.style.height = "320px";
      }
      break;
    default:
      txtOne.style.height = "0px";
      txtTwo.style.height = "0px";
      break;
  }
});
/* This CSS is just for demonstration purposes only */
#gnrl, #dbid {outline:solid green 1px;}
#txt, #txt2 {outline:solid red 1px;}
<ul>
    <li class="gendb1" id="gnrl">GENERAL</li>
    <li class="gendb" id="dbid">D&amp;B</li>
</ul>
    <div id="txt">
       <span style="display: block; margin-top: 29px;">Some text</span>
    </div>
    <div id="txt2">
       <span style="display: block; margin-top: 29px;">Some other text</span>   
    </div>

加上这个

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
相关文章：