当navabar折叠时，Navbar下拉菜单不显示内容

Question

我创建了一个导航栏，上面有一些链接，有些链接有下拉链接。但是现在当我缩小屏幕尺寸时，导航栏会折叠，但是当展开时，下拉菜单无效。

这是我的折叠按钮代码。

<a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>

M脚本就像这样

<script>
    jQuery(document).ready(function() {
        jQuery('.toggle-nav').click(function(e) {
            jQuery(this).toggleClass('active');
            jQuery('.menu ul').toggleClass('active');

            e.preventDefault();
        });
    });
    </script>

我的导航栏代码是：

<div id="logo">
        <a href="/" ><img src="../img/3d.png" class="image-responsive"/></a>
    </div>
    <div id="container">
        <nav class="menu">
            <ul class="active">
            <li class="spots"><a href="/spots">SPOTS</a></li>
            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">PRODUCTS
        <span class="caret"></span></a>

            <ul class="dropdown-menu">

            <li class="printers"><a href="../3dprinters">3D PRINTERS</a></li>

            <li class="scanners"><a href="../3dscanners">3D SCANNERS</a></li>

            <li class="consumable"><a href="../filaments.php">FILAMENTS</a></li>

            </ul>

            </li>

            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">SERVICES
        <span class="caret"></span></a>

            <ul class="dropdown-menu">
            <li class="printing"><a href="../services.php">PRINTING SERVICES</a></li>

            <li class="printing"><a href="#">3D DESIGNING</a></li>
            <
            <li class="printing"><a href="#">3D SCANNING</a></li>

            </ul>

            </li>

            <li class="dropdown">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#">LEARN
        <span class="caret"></span></a>

            <ul class="dropdown-menu">

            <li class="learn"><a href="../workshop">WORKSHOPS</a></li>

            <li class="learn"><a href="#">GUEST LECTURES</a></li>

            <li class="learn"><a href="#">CORPORATE TRAINING</a></li>

            </ul>

            </li>      

            <li class="learn"><a href="../contacts.php">CONTACT</a></li>
            </ul>

            <a class="toggle-nav" href="#"><img src="../img/nav.png" /></a>
        </nav>
    </div>