Question

我在网站上完成了一些工作，但开发人员没有完成这项工作，因此我需要一些（可能）基本代码才能完成此任务。

基本上，当用户点击页面上的任何其他位置时，我需要一个下拉框来重新启动。此刻它会一直保持下降状态，直到您再次单击该菜单项。

以下是我从网站上获取的代码：

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

任何帮助都会很棒。谢谢！

Answer 1

添加此内容。

<select>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Answer 2

可能有很多方法可以实现这一目标。下面的代码片段包含一种方法，即＆＃34;关闭＆＃34;什么，除了他们的＆＃34;触发＆＃34;点击。此代码还会从列表项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>

<强>段

＆＃13;

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

＆＃13;

/* This CSS is just for demonstration purposes only */
#gnrl, #dbid {outline:solid green 1px;}
#txt, #txt2 {outline:solid red 1px;}

＆＃13;

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

＆＃13;

单击页面上的任何其他位置时，下拉菜单会重新启动

2 个答案: