Javascript 如何制作<；导航>；单击div后滑入？

嗨，我需要的东西，将使导航内容滑出时，从左侧的div类“bt菜单”按下。当再次单击div或单击导航以外的任何位置时，它还需要滑回左侧

主导航中有子菜单，正如您在下面的代码中所看到的，这意味着我需要能够使用类“子菜单”单击一个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>

希望您能帮忙，谢谢

最简单的方法是：

$(".bt-menu").click(function(){  $("nav").slideToggle(); });

我编辑代码，你可以检查它的工作

$（文档）.ready（函数（）{
$（“.bt菜单”）。单击（函数（）{$（.nav”）.slideToggle（）；}）；
});





























检查一下，到目前为止您尝试的JS代码在哪里？
code
$（document）.ready（main）；var计数器=1；函数main（）{$（“.menu_bar”）。单击（函数（）{if（counter==1）{$（.nav”）。动画（{left:'0'}）；计数器=0；}否则{counter=1；$（.nav”）。动画（{left:'-100%}）；$（.submenu”）。单击（函数（）{$（this）.子菜单（.children children（.children”）.slideToggle（）；}）
code
建议您在jsfiddle或codepen.io上进行演示。从这里很难看出你尝试了什么，你在哪里。这对我不起作用。我复制了这段代码，但它仍然不起作用，我只希望它在屏幕小于一定大小时滑入。我有一个适用于笔记本电脑的导航菜单，但当屏幕尺寸减小时，我无法让按钮工作。我在头部添加了一个带有jquery代码的脚本标记。要检查您的网站是否在移动设备上破坏，您可以使用此帖子：