Javascript下拉列表不起作用

Javascript dropdown list not working

本文关键字：不起作用 下拉列表 Javascript      更新时间：2023-09-26

我刚开始学习web开发语言，现在我正在尝试使用javascript制作下拉列表（我已经尝试过CSS，但没有成功）
如果你能告诉我我的代码出了什么问题，我会很感激的。

<nav>
    <ul class="anchors">
    <!-- This is where the dropdown list should appear if you hover your mouse over it -->
        <li class="list-comanda">
            <a href="javascript:void(0)" onmouseover="dropdown()">Comanda</a>
        </li>  
        <div class="dropdown" id="dropdown" style="display: none;">
            <ul class="dropdown-list">
                <li class="dropdown-l-magneti"><a href="magneti"> Magneti de frigider personalizati</a></li>
                <li class="dropdown-l-hartie"><a href="hartie"> Obiecte facute din hartie</a></li>
            </ul>
        </div>
        <li class="list-contact"><a href="contact">Contacteaza-ma</a></li>
    </ul>
</nav>
<script>        
    function dropdown{
        var dropdown = document.getElementById("dropdown");
        dropdown.style.display = "inline-block";
    }   
</script>

如果我的代码杂乱无章，我深表歉意。

您完全可以在css中实现这一点。首先创建菜单标记，确保将下拉列表嵌入到所需的li中，我们将为它们提供一个dropdown类，以便在默认情况下隐藏它们。

<ul id='menu'>
  <li>link 1</li>
  <li>link 2</li>
  <li>link 3</li>
  <li class='dropdown'>link 4
    <ul>
      <li>sublink</li>
      <li>sublink</li>
      <li>sublink</li>
    </ul>
  </li>
</ul>

在我们的标记中，您可以看到我们有一个带有嵌入式下拉列表的子li，我们在这里使用一个类，因为使用id会使我们无法在同一页面上拥有多个下拉列表（请记住，id应该始终是唯一的，以描述内容的特定部分，而类允许我们重复常见任务）。

然后我们连接我们的css：

#menu {
  list-style: none;
}
#menu li {
  vertical-align: top;
  display: inline-block;
}
#menu .dropdown ul {
  background: red;
  display: none;
}
#menu .dropdown:hover > ul {
  display: block;
}
#menu .dropdown ul li {
  display: block;
}

这里需要注意的几点是，在开始时，我们将下拉菜单ul的默认样式设置为display: none，这将完全隐藏在页面中。我们还在菜单li上使用vertical-align: top，以确保当下拉菜单显示时，它不会在显示下拉菜单时向下推菜单项（尝试禁用此功能，您就会明白我的意思）。最后，我们使用子选择器工具将hover事件添加到下拉菜单中。这意味着我们可以将hover事件绑定到.dropdown类，并将样式直接应用于其子ul（即隐藏的元素）。如果我们只是尝试将.dropdown类设置为display; block，那么我们不会看到任何更改。

这个例子的jsfiddle可以在这里找到——上面没有漂亮的样式，但我相信你自己也能弄清楚。如果你还有其他问题，请告诉我。

除了这篇文章的答案之外，我想指出的是，使用Twitter的Bootstrap是快速实现风格良好的跨浏览器组件的好方法，上面的链接直接应用于它们的下拉列表。然而，我知道你说过你是网络开发的初学者，我完全理解你想学习如何将这些东西组合在一起；只是不要养成重新发明轮子的习惯，你很快就会知道使用经过战斗测试的代码有时是更好的选择：）

正确声明函数下拉列表：-function dropdown(){//body}

您正在调用dropdown函数onmouseover。这个函数在哪里？

更改：

function dropdown{

至：

function dropdown(){

检查此小提琴

我认为我们需要（）作为函数

<script>
        function dropdown(){
            var dropdown = document.getElementById("dropdown");
            dropdown.style.display = "inline-block";
        }
    </script>

这不会更容易吗：

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
  <option>Option 4</option>
</select>

相关文章：