实现点击导航项时子导航栏的滑入滑出切换功能

嘿，你的思路完全没问题，但代码里有几个小细节得调整下才能正常工作，我帮你修正并完善了代码，一起来看看：

先说说原代码里的小问题： #

• 你的li元素id写成了id="#grab"，这里多了个#——元素的id属性值不能带#，应该改成id="grab"，jQuery选择器里才用#来选中对应id的元素。
• jQuery的引用要放在你的自定义脚本前面，不然浏览器还没加载jQuery就执行你的代码，会直接报错。
• 没设置子导航默认隐藏，页面加载时子导航会直接显示，体验不太好。

修正后的完整代码： #

HTML部分

<ul class="nav">
  <li id="grab">About
    <ul class="sub-nav">
      <li>Bob</li>
    </ul>
  </li>
  <li>Contact</li>
  <li>Faqs</li>
</ul>

<!-- 先加载jQuery库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- 再加载自定义交互脚本 -->
<script>
$(document).ready(function() {
  $("#grab").click(function() {
    $(".sub-nav").slideToggle();
  });
});
</script>

CSS部分（可选但推荐，让导航更美观）

.nav {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 25px;
  background: #f5f5f5;
  padding: 12px 25px;
  margin: 0;
}

.nav li {
  position: relative; /* 让子导航相对于父li定位 */
  cursor: pointer;
  padding: 5px 0;
}

.sub-nav {
  list-style: none;
  padding: 0;
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  border: 1px solid #eee;
  border-radius: 4px;
  display: none; /* 默认隐藏子导航 */
  margin: 0;
}

.sub-nav li {
  padding: 8px 18px;
  white-space: nowrap;
}

.sub-nav li:hover {
  background: #f0f0f0;
}

代码说明： #

• 修正了id的错误，确保jQuery能正确选中点击的About项。
• 调整了脚本加载顺序，保证jQuery先加载完成再执行交互逻辑。
• 新增的CSS不仅让导航看起来更专业，还通过display: none默认隐藏子导航，配合jQuery的slideToggle()方法，完美实现点击滑入、再次点击滑出的切换效果。
• slideToggle()方法本身会自动切换元素的显示状态，不用额外写判断逻辑，正好匹配你的需求。

内容的提问来源于stack exchange，提问作者Chris Brennan