Question

我正在网站上设置一个下拉按钮，但是我得到了这个奇怪的东西。下拉部分仅在单击按钮框时显示，而在单击“工具”时不显示。我究竟做错了什么？非常感谢！

（好的，W3学校不会保存代码，所以我必须手动执行此操作）

    /* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }

    .dropdown {
      position: relative;
      display: inline-block;
    }
    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    button.dropbtn{
      background:none;
      border:none;
      padding:0;
    }
    .dropdown a:hover {background-color: #ddd;}
    .show {display: block;}

    <body>
    <div class="column-outlet">
      <button onclick="myFunction()" class="dropbtn"><strong>Tools</strong></button>
      <div id="myDropdown" class="dropdown-content">
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
      </div>
    </div>

Answer 1

从按钮中删除强标签。

<body>
<div class="column-outlet">
  <button onclick="myFunction()" class="dropbtn">Tools</button>
  <div id="myDropdown" class="dropdown-content">
    <li class="force-css"><a href="#">Blok 1</a></li>
    <li class="force-css"><a href="#">Blok 1</a></li>
    <li class="force-css"><a href="#">Blok 1</a></li>
  </div>
</div>
</body>

Answer 2

不要在标签中使用标签，而是在CSS中使用文本权重，并使用UL标签创建列表

/* When the user clicks on the button, 
    toggle between hiding and showing the dropdown content */
    function myFunction() {
      document.getElementById("myDropdown").classList.toggle("show");
    }
    
    // Close the dropdown if the user clicks outside of it
    window.onclick = function(event) {
      if (!event.target.matches('.dropbtn')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
      }
    }

.dropdown {
      position: relative;
      display: inline-block;
     
    }
    .dropdown-content {
      display: none;
      position: absolute;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
    }
    button.dropbtn{
     font-weight: 700;
      background:none;
      border:none;
      padding:0;
    }
    .dropdown a:hover {background-color: #ddd;}
    .show {display: block;}

<body>
    <div class="column-outlet">
      <button onclick="myFunction()" class="dropbtn">Tools</button>
      <ul id="myDropdown" class="dropdown-content">
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
        <li class="force-css"><a href="#">Blok 1</a></li>
      </ul>
    </div>

如何通过单击文本打开下拉按钮？

2 个答案: