我在使用 jQuery 显示和隐藏下拉菜单时遇到问题

Question

我尝试查看多个不同的来源和不同的代码。 None 对我有用，我不确定我的代码有什么问题。如果它看起来像一个业余爱好者，我深表歉意，因为我还年轻，很快就将代码从我的网站复制到 jsfiddle 上。我真的很感激任何帮助，因为我已经坚持了好几天并且对此失去了理智，当它可能很简单时。

Link to my code

HTML:

    <div class="nav_container">
  <div class="nav_header">
  </div>
  <div class="nav_content">
    <ul class="nav_list">
      <li>
    <a href="/">
      <span>Home</span>
    </a>
      </li>
      <li id="categories_list">
    <a href="#">
          <span>Categories</span>
    </a>
      </li>
      <li id="me_list">
    <a href="#">
      <span>Me</span>
    </a>
      </li>
      <li>
    <a href="/categories/all">
      <span>Games A-Z</span>
    </a>
      </li>
    </ul>
  </div>
  <a href="/">
  <img src="/thumbs/header_image_white.png" style="position:relative; height: 103px;">
  </a>
</div>
    <div id="categories_dropdown_menu">
      <ul class="dropdown_menu">
    <li>
      <a href="/">
        <span>Action</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Action-Adventure</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Adventure</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Arcade</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Multiplayer</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Racing</span>
      </a>
    </li>
    </br>
    <li>
      <a href="/">
        <span>Role-Playing</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Shooting</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Simulation</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Sports</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Strategy</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>All</span>
      </a>
    </li>
      </ul>
</div>

脚本：

<script> 
 $(document).ready(function(){
$("#categories_list").click(function(){
    $("#categories_dropdown_menu").slideToggle("slow");
   });
});
</script>

我希望下拉菜单是整个页面的宽度，这就是为什么 ul 不在 categories_list id 中的原因。

编辑：不好意思，我忘了包括下拉菜单，尽管我以为我有。我更新了 link 和 HTML。如果你现在能看一遍，那就太好了。谢谢。

Answer 1

您没有在您的 jsFiddle 中包含 jQuery。

而且在 JS 部分，您不需要包含脚本标签。

DEMO

与上述显示下拉菜单的方法不同，我更喜欢纯 CSS 显示下拉菜单的方法：

ul.nav_list li ul {
 display: none;
}
ul.nav_list li:hover ul {
   display: block;
  /* make position absolute and give width to be 100% to make it take full width*/
}

<ul class="nav_list">
<li> <a href="/">
  <span>Home</span>
</a>

</li>
<li id="categories_list"> <a href="#">
      <span>Categories</span>
</a>

    <ul class="dropdown_menu">
        <li> <a href="/">
<span>Action</span>
  </a>

        </li>
        <li> <a href="/">
<span>Action-Adventure</span>
  </a>

        </li>
        <li> <a href="/">
<span>Adventure</span>
  </a>

        </li>
        <li> <a href="/">
<span>Arcade</span>
  </a>

        </li>
        <li> <a href="/">
<span>Multiplayer</span>
  </a>

        </li>
        <li> <a href="/">
<span>Racing</span>
  </a>

        </li>
       
        <li> <a href="/">
<span>Role-Playing</span>
  </a>

        </li>
        <li> <a href="/">
<span>Shooting</span>
  </a>

        </li>
        <li> <a href="/">
<span>Simulation</span>
  </a>

        </li>
        <li> <a href="/">
<span>Sports</span>
  </a>

        </li>
        <li> <a href="/">
<span>Strategy</span>
  </a>

        </li>
        <li> <a href="/">
<span>All</span>
  </a>

        </li>
    </ul>
</li>
<li id="me_list"> <a href="#">
  <span>Me</span>
</a>

</li>
<li> <a href="/categories/all">
  <span>Games A-Z</span>
</a>

</li>
</ul>

在您的页面中，您需要做一些 CSS 更改：

ul.nav_list li:hover ul {
  display: block;
  position: absolute;
  top: 26px;
  background: gray;
}

.nav_content {
 // remove overflow: hidden;
}

图片：

我在使用 jQuery 显示和隐藏下拉菜单时遇到问题

I am having issues using jQuery to show and hide a dropdown menu

html

css

jquery

drop-down-menu