javascript - 使子导航向下滑动和向上滑动切换

Question

这是我正在尝试做的事情:

• 创建带有子导航或子页面的导航。

• 当用户点击关于时，我希望关于切换 Bob li。

• 点击about时应该向下滑动和向上滑动。

$(document).ready(function() {
  $("#grab").click(function() {
    $(".sub-nav").slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav">
  <li id="#grab">About
    <ul class="sub-nav">
      <li>Bob</li>
    </ul>
  </li>
  <li>Contact</li>
  <li>Faqs</li>
</ul>

Answer 1

你的 HTML 是错误的，你在抓取之前有一个标签 id="#grab" 它应该是 id="grab" 默认情况下，li 包含“Bob” be show 要解决此问题，请通过类或内联将 display:none; 添加到 ul

$(document).ready(function() {
  $("#grab").click(function() {
    $(".sub-nav").stop().slideToggle();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <ul class="nav">
  <li id="grab">About
   <ul style="display:none" class="sub-nav">
    <li >Bob</li>
   </ul>
  </li>
 <li>Contact</li>
 <li>Faqs</li>
</ul>