JavaScript下拉列表不起作用

Question

我刚刚开始学习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>

如果我的代码是无序的，我深表歉意。

Answer 1

您可以完全在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 s的嵌入式下拉列表中，我们使用一个类这里使用的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的默认样式display: none样式会将其完全隐藏在页面中。 我们还使用vertical-align: top在菜单li的vertical-align: top ，以确保当显示下拉菜单时，下拉菜单显示时它不会将菜单项向下推（尝试禁用此项，您会明白我的意思）。 最后，我们使用子选择器工具将hover事件添加到下拉菜单中。 这意味着我们可以将hover事件绑定到我们的.dropdown类，并将样式直接应用于其子ul （这是隐藏的元素）。 如果我们只是尝试将.dropdown类设置为display; block display; block那么我们将看不到任何变化。

可以在此处找到该示例的jsfiddle，没有漂亮的样式，但我敢肯定您可以自己弄清楚。 如果您还有其他问题，请告诉我。

除了本文的答案外，我想指出的是，使用Twitter的Bootstrap之类的方法是一种快速实现样式美观且跨浏览器组件的好方法，以上链接直接适用于它们的下拉菜单。 但是，我知道您说过您是Web开发人员的初学者，并且我完全理解您想学习如何将这些内容组合在一起。 只是不养成重新发明轮子的习惯，您很快就会知道，使用经过战斗测试的代码有时是更好的选择:)

Answer 2

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

Answer 3

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

更改：

function dropdown{

至：

function dropdown(){

检查这个小提琴

Answer 4

我认为我们需要一个函数

<script>

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

    </script>

Answer 5

这会不会更容易：

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