侧导航下拉菜单未使用引导程序打开答案

【问题标题】：side nav dropdown menu not opening with bootstrap侧导航下拉菜单未使用引导程序打开
【发布时间】：2018-03-05 18:09:50
【问题描述】：

我需要实现带有子菜单的侧导航菜单我面临的问题是子菜单或下拉菜单没有打开，或者默认情况下它们没有折叠。

<div class="nav-side-menu">
    <div class="brand">Brand Logo</div>
    <i class="fa fa-bars fa-2x toggle-btn" data-toggle="collapse" data-target="#menu-content"></i>

        <div class="menu-list">

            <ul id="menu-content" class="menu-content collapse out">


                <li  data-toggle="collapse" data-target="#products" class="collapsed active">
                  <a href="#"><i class=""></i> UI Elements <span class="arrow"></span></a>
                </li>
                <ul class="sub-menu" id="products">
                    <li class="active"><a href="#">CSS3 Animation</a></li>
                    <li><a href="#">General</a></li>
                    <li><a href="#">Buttons</a></li>
                    <li><a href="#">Tabs & Accordions</a></li>
                    <li><a href="#">Typography</a></li>
                    <li><a href="#">FontAwesome</a></li>
                    <li><a href="#">Slider</a></li>
                    <li><a href="#">Panels</a></li>
                    <li><a href="#">Widgets</a></li>
                    <li><a href="#">Bootstrap Model</a></li>
                </ul>

            </ul>
     </div>
</div>

所以我有一个用于测试的下拉菜单，如果我点击其中任何一个，它们都不会打开

【问题讨论】：

标签： javascript css html twitter-bootstrap-3 responsive-design

【解决方案1】：

也许对你有帮助...

<head>
<title>Bootstrap 3 Collapsible Sidebar</title>
<!-- Bootstrap CSS CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Our Custom CSS -->
<link rel="stylesheet" href="css/custom.css">

<!-- jQuery CDN -->
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<!-- Bootstrap Js CDN -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="wrapper">

<nav id="sidebar">
    <!-- Sidebar Header -->
    <div class="sidebar-header">
        <h3>Collapsible Sidebar</div>
    </div>

    <!-- Sidebar Links -->
    <ul class="list-unstyled components">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">About</a></li>

        <li><!-- Link with dropdown items -->
            <a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false">Pages</a>
            <ul class="collapse list-unstyled" id="homeSubmenu">
                <li><a href="#">Page</a></li>
                <li><a href="#">Page</a></li>
                <li><a href="#">Page</a></li>
            </ul>

        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

【讨论】：

【解决方案2】：

我发现我的问题不在于 html 标签

我应该在引导库之前包含 jquery 库。

【讨论】：