Question

它在较小的设备上正常崩溃。单击菜单按钮可展开菜单，但如果我在切换栏上单击（或触摸），菜单将保持打开状态。我该怎么办，再次关闭它。

 <nav class="navbar navbar-inverse">
        <div class="navbar-header">
            <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".js-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">testing</a>

        </div>
        <div class="navbar-collapse collapse js-navbar-collapse">

 <ul class="nav navbar-nav">

         <li><a style="width:113px !important" href="/admin/index">Dashboard</a></li>
            </ul>
             <ul class="nav navbar-nav">
                         <li><a  style="width:113px !important" href="/admin/ListEmployers">Employers</a></li>

             </ul>
            <ul class="nav navbar-nav">


                <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Manage <span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

                    <ul class="dropdown-menu mega-dropdown-menu row">

                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Manage</li>
                                <li><a href="/content/admin">Manage Content</a></li>
                            <li> <a href="/admin/ListEmployers ">Manage Employers</a></li>
                            <li>   <a href="/admin/listjobs ">Manage Jobs</a></li>
              <li><a href="/admin/ManageContact">Manage Enquiry</a></li>
              <li><a href="/admin/EmailSettings ">Manage Site Settings</a></li>
                            <li><a href="/admin/profile">Manage Admin Account</a></li>
              <li><a href="/admin/ManageFeedback">Manage Feedback</a></li>
                            <li><a href="/admin/corporateRequests">Manage Corporate Requests</a></li>
                            <li><a href="/admin/connectionrequests">Extra Connection Requests</a></li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Products</li>
                                <li><a href="/site/socialrecruiting">Social Recruiting</a>
                                </li>
                                <li><a href="/site/hiringcollabration">Hiring Collaboration</a>
                                </li>
                                <li><a href="/site/ats">Automatic Job Posting</a>
                                </li>

                                <li><a href="/site/careersite">Careers site Branding</a>
                                </li>


                                <li><a href="/site/EmployeeReferral">Employee Referral</a>
                                </li>
                                <li><a href="/site/analytics">Analytics</a>
                                </li>
                                 <li><a href="/users/register">Signup</a>
                                </li>
                                 <li><a href="/users/login">Login</a>
                                </li>
                                  <li><a href="/site/Contactus">Contact Us</a>
                                </li>
                            </ul>
                        </li>
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">More</li>
                                <li><a href="/site/TermsOfService">Terms Of Service</a>
                                </li>
                                 <li><a href="/site/aboutus">Company</a>
                                </li>

                                <li class="divider"></li>

                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
                            <ul class="nav navbar-nav">
                <li class="dropdown mega-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">My Account<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>

                    <ul class="dropdown-menu mega-dropdown-menu row">

                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Account Management</li>
                                 <li><a href="/admin/profile">Edit Profile</a></li>
            <li><a href="/admin/logout">Log out</a></li>
                            </ul>
                        </li>
                        <!-- 
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Jackets</li>
                                <li><a href="#">Easy to customize</a>
                                </li>
                                <li><a href="#">Glyphicons</a>
                                </li>
                                <li><a href="#">Pull Right Elements</a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Pants</li>
                                <li><a href="#">Coloured Headers</a>
                                </li>
                                <li><a href="#">Primary Buttons & Default</a>
                                </li>
                                <li><a href="#">Calls to action</a>
                                </li>
                            </ul>
                        </li>
                        -->
                        <!-- 
                        <li class="col-sm-3">
                            <ul>
                                <li class="dropdown-header">Accessories</li>
                                <li><a href="#">Default Navbar</a>
                                </li>
                                <li><a href="#">Lovely Fonts</a>
                                </li>
                                <li><a href="#">Responsive Dropdown </a>
                                </li>
                                <li class="divider"></li>
                                <li class="dropdown-header">Newsletter</li>
                                <form class="form" role="form">
                                    <div class="form-group">
                                        <label class="sr-only" for="email">Email address</label>
                                        <input type="email" class="form-control" id="email" placeholder="Enter email">
                                    </div>
                                    <button type="submit" class="btn btn-primary btn-block">Sign in</button>
                                </form>
                            </ul>
                        </li>
                        -->
                    </ul>
                </li>
            </ul>

              <ul class="nav navbar-nav">
                         <li><a  style="width:113px !important" href="/admin/logout">Logout</a></li>

             </ul>
        </div>
        <!-- /.nav-collapse -->
    </nav>
</div>

我从http://bootsnipp.com/snippets/featured/bootstrap-mega-menu

获取代码

Answer 1

它完美地在我身边

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

-- your menu code --

试试这个.. 可能会工作

打开后，Bootstrap切换未关闭

1 个答案: