javascript - 下拉菜单在理论上显示但在实践中不显示

标签 javascript html css drop-down-menu

我尝试让几个下拉菜单正常工作，但结果不一致。下面是当我在 w3www 学校使用“试用”功能时有效的代码，但是当我将它放入我的工作表中时，按钮以正确的样式格式显示，但单击它们不显示菜单？将整个 block 放入我的 html 文档或将其分解为我正在构建的单独的 html/css/js 文档似乎并不重要。有什么建议么？我现在已经花了大约 2 个小时尝试不同的事情，但结果好坏参半，但没有任何迹象表明我已经找到问题的根源。值得注意的是，这是我要实现的 6 个下拉菜单之一。谢谢!

<!DOCTYPE html>
<html>
<head>
<style>
.dropbtn {
    background-color: #930d0d;
    color: black;
    padding: 8px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropbtn:hover, .dropbtn:focus {
    background-color: #930d0d;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    overflow: auto;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 4px 8px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #000000}

.show {display:block;}
</style>
</head>
<body>

<h2>Clickable Dropdown</h2>
<p>Click on the button to open the dropdown menu.</p>


<div class="dropdown">
<button id="myBtn" class="dropbtn">How many miles are you willing to drive?        
</button>
  <div id="mDistance" class="dropdown-content">
    <a href="#5">5</a>
    <a href="#10">10</a>
    <a href="#Distance">15</a>
    <a href="#Distance">20</a>
    <a href="#Distance">25</a>
    <a href="#Distance">30</a>
    <a href="#Distance">35</a>
    <a href="#Distance">40</a>
    <a href="#Distance">45</a>
    <a href="#Distance">50</a>
    <a href="#Distance">55</a>
    <a href="#Distance">60</a>
    <a href="#Distance">65</a>
    <a href="#Distance">70</a>
    <a href="#Distance">75</a>
    <a href="#Distance">80</a>
    <a href="#Distance">85</a>
    <a href="#Distance">90</a>
    <a href="#Distance">95</a>
    <a href="#Distance">100</a>
  </div>
</div>

<script>
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
    document.getElementById("mDistance").classList.toggle("show");
}
</script>

</body>
</html>

***编辑:其余按钮，按要求编辑。我没有重新复制 css，因为它对所有的人都是一样的。我将每个下拉列表与其对应的脚本分组

    <div class="dropdown">
<button id="myBtn" class="dropbtn">What kind of friendship are you looking     for?</button>
  <div id="mGoal" class="dropdown-content">
    <a href="#Goal">PenPals</a>
    <a href="#Goal">Spontaneous</a>
    <a href="#Goal">Planned Events</a>
</div>
<script>
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
    document.getElementById("mGoal").classList.toggle("show");
</script>
    <div class="dropdown">
<button id="myBtn" class="dropbtn">What time of day are you most available?        
</button>
  <div id="mDay" class="dropdown-content">
    <a href="#day">Morning</a>
    <a href="#day">Night</a>
    <a href="#day">Both</a>
  </div>
</div>
<script>
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
    document.getElementById("mDay").classList.toggle("show");
</script>
    <div class="dropdown">
<button id="myBtn" class="dropbtn">How do you recover energy?</button>
  <div id="mVert" class="dropdown-content">
    <a href="#vert">Introvert</a>
    <a href="#vert">Extrovert</a>
    <a href="#vert">Ambivert</a>
  </div>
</div>
<script>
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
    document.getElementById("mVert").classList.toggle("show");
</script>
<div class="dropdown">
<button id="myBtn" class="dropbtn">How many years older or younger than you are you comfortable making friends?</button>
  <div id="mAge" class="dropdown-content">
    <a href="#age">5</a>
    <a href="#age">10</a>
    <a href="#age">15</a>
    <a href="#age">20</a>
    <a href="#age">25</a>
    <a href="#age">30</a>
    <a href="#age">35</a>
    <a href="#age">40</a>
    <a href="#age">45</a>
    <a href="#age">50</a>
    <a href="#age">55</a>
    <a href="#age">60</a>
    <a href="#age">65</a>
    <a href="#age">70</a>
    <a href="#age">75</a>
    <a href="#age">80</a>
  </div>
</div>
<script>
document.getElementById("myBtn").onclick = function() {myFunction()};
function myFunction() {
    document.getElementById("mAge").classList.toggle("show");

编辑编号 2: this is what it looks like if i take out the script connecting the separate js page, and put the button scripts under their html codes CSS 页面重新链接。所以我无法弄清楚它是否仍然是一个 js 问题(除了本例中的按钮行之外，任何类型的 js 代码都是零)或者 css 或 html 本身是否存在问题？取消链接 CSS 页面没有帮助，我先试过了。

第三次编辑 意识到我没有更新所有的功能问题，现在已经解决了，我只剩下这个了。哪个更好.......但现在它可能只是一个 z=designation 问题？或许？ enter image description here

最佳答案

您在分配了点击处理程序的按钮上有重复的 ID，它们都引用相同的函数 myFunction()，因为您一遍又一遍地定义它，所以它不断被覆盖。

您可能需要使这些函数和 ID 唯一，以便可以将点击处理程序分配给唯一的列表，或者使用单个函数以更模块化的方式构建它。我稍微重写了这个，以便您的 ID 是唯一的，并更新了点击处理程序，以便将它们分配给具有独特功能的唯一 ID。

<html>

<head>
  <style>
    .dropbtn {
        background-color: #930d0d;
        color: black;
        padding: 8px;
        font-size: 16px;
        border: none;
        cursor: pointer;
    }
    
    .dropbtn:hover, .dropbtn:focus {
        background-color: #930d0d;
    }
    
    .dropdown {
        position: relative;
        display: inline-block;
    }
    
    .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    }
    
    .dropdown-content a {
        color: black;
        padding: 4px 8px;
        text-decoration: none;
        display: block;
    }
    
    .dropdown-content a:hover {background-color: #000000}
    
    .show {display:block;}
  </style>
</head>

<body>

  <h2>Clickable Dropdown</h2>
  <p>Click on the button to open the dropdown menu.</p>


  <div class="dropdown">
    <button id="myBtnGoal" class="dropbtn">What kind of friendship are you looking     for?</button>
    <div id="mGoal" class="dropdown-content">
      <a href="#Goal">PenPals</a>
      <a href="#Goal">Spontaneous</a>
      <a href="#Goal">Planned Events</a>
    </div>
    <script>
      document.getElementById("myBtnGoal").onclick = function() {
          document.getElementById("mGoal").classList.toggle("show");
      }
    </script>
    <div class="dropdown">
      <button id="myBtnDay" class="dropbtn">What time of day are you most available?        
</button>
      <div id="mDay" class="dropdown-content">
        <a href="#day">Morning</a>
        <a href="#day">Night</a>
        <a href="#day">Both</a>
      </div>
    </div>
    <script>
      document.getElementById("myBtnDay").onclick = function() {
          document.getElementById("mDay").classList.toggle("show");
      }
    </script>
    <div class="dropdown">
      <button id="myBtnVert" class="dropbtn">How do you recover energy?</button>
      <div id="mVert" class="dropdown-content">
        <a href="#vert">Introvert</a>
        <a href="#vert">Extrovert</a>
        <a href="#vert">Ambivert</a>
      </div>
    </div>
    <script>
      document.getElementById("myBtnVert").onclick = function() {
          document.getElementById("mVert").classList.toggle("show");
      }
    </script>
    <div class="dropdown">
      <button id="myBtnAge" class="dropbtn">How many years older or younger than you are you comfortable making friends?</button>
      <div id="mAge" class="dropdown-content">
        <a href="#age">5</a>
        <a href="#age">10</a>
        <a href="#age">15</a>
        <a href="#age">20</a>
        <a href="#age">25</a>
        <a href="#age">30</a>
        <a href="#age">35</a>
        <a href="#age">40</a>
        <a href="#age">45</a>
        <a href="#age">50</a>
        <a href="#age">55</a>
        <a href="#age">60</a>
        <a href="#age">65</a>
        <a href="#age">70</a>
        <a href="#age">75</a>
        <a href="#age">80</a>
      </div>
    </div>
    <script>
      document.getElementById("myBtnAge").onclick = function() {
          document.getElementById("mAge").classList.toggle("show");
      }
    </script>

</body>

</html>

关于javascript - 下拉菜单在理论上显示但在实践中不显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41516326/

上一篇：html - 未捕获的 ReferenceError : goAndFind is not defined at HTMLInputElement. onclick

下一篇：javascript - 如何制作jquery多图预览

相关文章：

html - Flexbox div 不占用整个宽度

html - 在 Angular2 中使用 css 向 ng2-select2 添加样式

jquery - CSS3+jQuery图像变换

javascript - 如何将 Angular 5 Material 选择下拉列表(mat-select)更改为 typescript 代码/文件中的选项之一？

javascript - 我可以使用 JavaScript 检查浏览器历史记录中是否有下一页吗？

javascript - AngularJs ng-click 不适用于 Bootstrap 下拉菜单

Javascript 函数包装失败？

html - 带有属性的随机图像 css

html - CSS Responsive Mobile Issue - Foundation 前端框架(ZURB)

javascript - 在ajax中使用函数外部的变量

©2024 IT工具网  联系我们