使子导航滑动并滑动切换
以下是我想要做的事情：
使用子导航或子页面创建导航。
当用户点击时，我想要切换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> 你的HTML是错误的，你有一个标签之前抢id="#grab"它应该是id="grab"默认情况下李将包含“鲍勃”将显示解决此问题，添加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> #用于引用id，在你的标签中，你将id设置为#grab ，并且在你的jquery中，你将#grab （）事件设置为类grab 。 然后，您需要更改您的<li> ID以grab ：
<li id="grab">
您可以将display: none添加到<ul> 。 这样，当页面加载时， sub-nav开始隐藏：
你可以在标签上设置它：
<ul class="sub-nav" style="display: none;">
或者在你的CSS中：
.sub-nav{
display: none;
}