如何点击div <nav>进入幻灯片？

Question

嗨，当按下div类“bt-menu”时，我需要能够使导航内容从左侧滑出的东西。当再次单击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>

希望你能提供帮助，谢谢

Answer 1

最简单的方法是：

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

我编辑你可以检查它的代码。

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

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<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>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
$(document).ready(function(){

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

  });
</script>
    <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>