【发布时间】：2015-10-05 02:52:01
【问题描述】：
您好，我需要一些可以在按下 div 类“bt-menu”时使导航内容从左侧滑出的东西。当再次点击 div 或点击 nav 之外的任何位置时，它也需要滑回左侧。
主导航中有子菜单，正如您在下面的代码中看到的那样，这意味着我需要能够单击具有“子菜单”类的 LI，并让其中的列表从其下方向下滑动.
抱歉，我不知道如何向您展示我拥有的 CSS。
<header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-menu"></span>Menu</a>
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li class="submenu" >
<a href="#">Nielsen Products<span class="icon-arrow-down2"></span><span class="caret"></span></a>
<ul class="children">
<li><a href="#">Exterior Cleaning<span class="icon-dot-single"></span></a></li>
<li><a href="#">Interior Cleaning<span class="icon-dot-single"></span></a></li>
<li><a href="#">Odour Control & Air Fresheners<span class="icon-dot-single"></span></a></li>
<li><a href="#">Exterior Finishes<span class="icon-dot-single"></span></a></li>
<li><a href="#">Dressings<span class="icon-dot-single"></span></a></li>
<li><a href="#">Glass Cleaning<span class="icon-dot-single"></span></a></li>
<li><a href="#">Workshop Maintenance<span class="icon-dot-single"></span></a></li>
<li><a href="#">Janitorial<span class="icon-dot-single"></span></a></li>
<li><a href="#">TDS & SDS INFO<span class="icon-dot-single"></span></a></li>
</ul>
</li>
<li><a href="#">Nielsen Catalogue</a></li>
<li class="submenu">
<a href="#">Equipment/Tools/Consumables<span class="icon-arrow-down2"></span><span class="caret"></span></a>
<ul class="children">
<li><a href="#">Valeting, Brushes and Equipment<span class="icon-dot-single"></span></a></li>
<li><a href="#">Tools & Equipment<span class="icon-dot-single"></span></a></li>
<li><a href="#">Workshop Consumables<span class="icon-dot-single"></span></a></li>
<li><a href="#">AdBlue<span class="icon-dot-single"></span></a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
</nav>
</header>
希望你能帮忙，谢谢
【问题讨论】：
-
目前尝试过的JS代码在哪里？
-
code$(document).ready(main);变量计数器 = 1; function main () { $(".menu_bar").click(function(){ if (counter == 1) { $("nav").animate({ left: '0' }); counter = 0; } else { counter = 1; $("nav").animate({ left: '-100%' }); } }); $(".submenu").click(function(){ $(this).children(".children").slideToggle(); }); }code -
推荐你在 jsfiddle 或 codepen.io 上放一个 demo。很难从中看出你尝试了什么，以及你被困在哪里
标签： javascript jquery html css