个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-28 04:35:22 24 4
gpt4 key购买 nike

我尝试让几个下拉菜单正常工作，但结果不一致。下面是当我在 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 codesCSS 页面重新链接。所以我无法弄清楚它是否仍然是一个 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/

24 4 0
文章推荐： javascript - 如何使用 onWindowResize 将容器居中调整大小
文章推荐： javascript - 如何制作jquery多图预览
文章推荐： html - 未捕获的 ReferenceError : goAndFind is not defined at HTMLInputElement. onclick
文章推荐： javascript - 我不知道如何将 iframe 链接到按钮