未显示W3.CSS的下拉内容

Question

我使用的是W3.CSS框架。之前一直在使用Bootstrap，但我认为W3.css更快，也想尝试一下。

我设置了一个带有内容的下拉按钮，但当我悬停它时，它没有显示下拉按钮。

我漏掉了什么吗？我已经在Chrome和Edge上尝试过了。下面是代码。

<div class="w3-dropdown-hover">
<button class="w3-button">Dropdown <i class="fa fa-caret-down"></i> </button>
<div class="w3-dropdown-content w3-bar-block w3-card-4">
  <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>

​

Answer 1

这个问题在这里得到了正确的解决：Dropdowns by w3schools

您需要将w3schools提供的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 rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-container">

  <p>Dropdown click Demo</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>

​