使子导航滑动和滑动切换

Question

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

• 使用子导航或子页面创建导航。
• 当用户点击about时，我希望即将切换Bob li。
• 当点击和关闭时，它应该向下滑动并向上滑动。

$(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”将显示以解决此问题，通过类或内联添加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> 

Answer 2

#用于引用id，在你的标签中你将id设置为#grab，在你的jquery中你将.click()事件设置为类grab。然后你需要将你的<li> id改为grab：

<li id="grab">

---

你可以添加display: none到你的<ul>。这样，当页面加载时，sub-nav开始隐藏：

您可以在标签上设置：

<ul class="sub-nav" style="display: none;">

或者在你的CSS中：

.sub-nav{
  display: none;
}