Twitter bootstrap 非传统的引导式导航没有'；单击鼠标右键可折叠下拉列表

ID:（#折叠我）是我无法在单击时折叠的。我正在使用它进行页面内锚定标记链接。我需要html结构和javascript的帮助，以使下拉列表崩溃。您可以在此处看到这一点：

当你滚动时，页面顶部的棕褐色菜单会粘在窗口上，我添加了ID（#collapse me）来尝试一些不同的东西以及stackoverflow的javascript解决方案，但我无法让它们中的任何一个正常工作。 您还应该知道，我使用媒体查询为引导引入了一个单独的移动导航。我不想为这个导航添加切换，我只希望UL在点击后崩溃

据推测，此代码就是解决方案：

<div id='lineage-center-nav'>
    <nav id='navigation-lineage' role='navigation'>
        <div id='navigation-lineage-shadow'></div> 
    <ul class='nav'><!-- .navbar-nav taken out-->   
       <li class='dropdown1'><a><span>Martial Arts History</span></a>
          <ul>
             <li><a href='#lineage-introduction'><span>Introduction (back to top)</span></a></li>
             <li><a href='#martial-arts-history'><span>Ancient martial arts history</span></a></li>
          </ul>
       </li>
       </li>
       <li class='dropdown1'><a href="#lineage-1955-present"><span>Tae Kwon Do..U.S.A. (1955-present)</span></a>
       </li>
       <li class='dropdown1'><a><span>Systems descended from Gene Perceval:</span></a>
          <ul id='#collapse-me' class='navbar-collapse'>
             <li><a href='#listing-of-systems'><span>Listing of Systems</span></a></li>
             <li><a href='#Black-Cat-Kenpo'><span>Black Cat Kenpo Karate Federation</span></a></li>
             <li><a href="#American-Combat-Karate"><span>American Combat Karate System</span></a></li>
             <li><a href='#American-Tae-Kwon-Do'><span>American Tae Kwon Do Moo Duk Kwan -<br>Federation</span></a></li>
             <li><a href='#Norwegian-Branch'><span>Norwegian Branch: Tae Kwon Do -<br>Moo Duk Kwan</span></a></li>
             <li><a href='#Tonji-System'><span>Tonji System</span></a></li>
             <li><a href='#Hard-Soft-System'><span>Hard/Soft system</span></a></li>   
          </ul>
       </li>
    </ul> 
    </nav><!-- END '#navigation-lineage --->
</div><!-- END '#lineage-center-nav' -->

$（文档）.ready（函数（）{
$（“.navbar nav li a”）。单击（函数（事件）{
$（“.navbar collapse”）.collapse（'hide'）；
});
});

这显然对我不起作用，因为我不知道html结构——特别是在哪里放置.navbar

而且，正如您所见，我使用onclick事件（stackoverflow建议的解决方案）使移动版的引导导航崩溃，而不是使用javascript来折叠菜单，但这显然不适用于上述情况，因为没有按钮切换（我不想使用），这是一个悬停事件，而不是单击：

<script>
  $(document).ready(function () {
      $(".navbar-nav li a").click(function(event) {
      $(".navbar-collapse").collapse('hide');
    });
  });
</script>

沿袭快捷菜单：
切换导航






























#导航沿袭li.dropdown1:hover>ul{
显示：阻止；/*在列表项悬停时显示下拉菜单*/
位置：绝对位置；
top:22px；/*这会拉起下拉菜单，使其与顶部菜单相遇。更改这些数值，菜单将崩溃*/
左：-1px；
最小宽度：100%；
文本对齐：左对齐；
填充顶部：9px；
填充底部：11px；/*这可以防止悬停图像使底部边界半径变为正方形*/
边界半径：0px 7px 7px 7px；
z指数：+1；
}
/*附加悬停*/
#导航沿袭li.dropdown1:hover>ulli{/*影响下拉菜单项的文本*/
最小宽度：270px；/*菜单选择器的宽度*/
填充顶部：6px；
垫底：6px；
左侧填充：26px；
右侧填充：4px；
边框顶部：0px无；
文本对齐：左对齐；
显示：块；
字体大小：正常；
字体大小：12px；
文本对齐：左对齐；
颜色：#000000；
字母间距：正常；
文本阴影：无；
文字装饰：无；
}

这个脚本几乎可以工作。使菜单消失。但我无法在100毫秒后再次显示.下拉菜单：

<div id='lineage-nav-xs-container'> 
<nav id='navigation-lineage-xs' class='navbar navbar-inverse' role="navigation"> <!-- .goToTop-xs in javascript, lineage.php, top of page. -->
<div id='navigation-lineage-shadow-xs'></div>
<div class='navbar-header'>
        <span class="navbar-brand" href="#">Lineage shortcut menu:</span>

        <button id='lineage-xs-button' type="button" class='navbar-toggle' data-toggle="collapse" data-target="#navigation-lineage-collapse"> <!-- Set the data-target equal to the ID name of the div that holds the class of 'navbar-collapse' so that the main navigation menu doesn't collapse as well. #lineage-xs-button only serves for selecting this button so the toggle of main navigation isn't selected. -->
        <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        </button>
</div><!-- END '#navbar-header' --->
<div id='navigation-lineage-collapse' class='collapse navbar-collapse'>
    <ul class='nav navbar-nav'>
       <li class='dropdown'><a href="#" class='dropdown-toggle' data-toggle="dropdown">Martial Arts History <b class='caret'></b></a>
          <ul class='dropdown-menu'>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#lineage-introduction'><span>Introduction (back to top)</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#martial-arts-history'><span>Ancient martial arts history</span></a></li>
          </ul>
       </li><!-- 'dropdown' is used by bootstrap main navigation, so 'dropdown1' will be used instead. -->
       <li id='lineage-submenu-480px'><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href="#lineage-1955-present">Tae Kwon Do Moo Duk Kwan U.S.A. - (1955-present)</b></a></li> <!-- mobile small -->
       <li id='lineage-submenu-479px'><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href="#lineage-1955-present">Tae Kwon Do..U.S.A. <br />(1955-present)</b></a></li> <!-- mobile extra small allowing for <br /> -->
       <li class='dropdown xs-fix-menu'><a href="#" class='dropdown-toggle' data-toggle="dropdown">Systems descended from Gene Perceval <b class='caret'></b></a>
          <ul id='lineage-submenu-480px' class='dropdown-menu'><!-- Don't forget that this <ul> needs class='dropdown-menu' to make it a dropdown menu for mobile -->
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#listing-of-systems'><span>Listing of Systems</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#Black-Cat-Kenpo'><span>Black Cat Kenpo Karate Federation</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href="#American-Combat-Karate"><span>American Combat Karate System</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#American-Tae-Kwon-Do'><span>American Tae Kwon Do Moo Duk Kwan Federation</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#Norwegian-Branch'><span>Norwegian Branch of Tae Kwon Do Moo Duk Kwan</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#Tonji-System'><span>Tonji System</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#Hard-Soft-System'><span>Hard/Soft system</span></a></li>  
          </ul>
          <ul id='lineage-submenu-479px' class='dropdown-menu'>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#listing-of-systems'><span>Listing of Systems</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#Black-Cat-Kenpo'><span>Black Cat Kenpo <br />Karate Federation</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href="#American-Combat-Karate"><span>American Combat <br />Karate System</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#American-Tae-Kwon-Do'><span>American Tae Kwon Do - <br />Moo Duk Kwan Federation</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#Norwegian-Branch'><span>Norwegian Branch of <br />Tae Kwon Do Moo Duk Kwan</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#Tonji-System'><span>Tonji System</span></a></li>
             <li><a onclick = $('#lineage-xs-button.navbar-toggle').click(); href='#Hard-Soft-System'><span>Hard/Soft system</span></a></li>  
              </ul>
           </li>
        </ul>
    </div><!-- END '#navigation-lineage-collapse' ----> 
</nav><!-- END '#navigation-lienage-xs' ----->
</div>

#navigation-lineage li.dropdown1:hover > ul {
  display: block;  /* Displays dropdown menu on list-item hover. */
  position:absolute;
  top:22px; /* This pulls up the dropdown menu so it meets with the top menu. Change these nunbers, and the menu will collapse. */
  left:-1px; 
  min-width: 100%; 
  text-align:left;
  padding-top:9px;
  padding-bottom:11px; /* This prevents the bottom border-radius from becoming square by hover image. */
  border-radius:0px 7px 7px 7px;
  z-index:+1;
}

/* ADDED HOVER */
#navigation-lineage li.dropdown1:hover > ul li a { /* Effect the text of the dropdown menu items. */
    min-width:270px; /* width of menu selector */
    padding-top:6px;
    padding-bottom:6px;
    padding-left:26px;
    padding-right:4px;
    border-top:0px none;
    text-align:left;
    display: block;
    font-weight:normal;
    font-size:12px;
    text-align:left;
    color:#000000;
    letter-spacing:normal;
    text-shadow:none;
    text-decoration:none;
}

$（文档）.ready（函数（）{
$（“.下拉菜单LIA”）。单击（函数（事件）{
setTimeout（函数（）{
$（'.dropdown menu'）.addClass（'hide'）；
}, 100);
});
});

javascript的第一个功能是通过单击下拉菜单LIA“清除”以前设置的任何类。当您将鼠标悬停在{.dropdown1 la a}（或.dropdown la a）上时，它将引导的.hide类应用于.dropdown菜单

<script>
  $(document).ready(function () {
      $(".dropdown-menu li a").click(function(event) {
      setTimeout(function (){
      $('.dropdown-menu').addClass('hide');
       }, 100);
    });
  });
</script>

$（文档）.ready（函数（）{
$（“.dropdown1”）.hover（函数（事件）{//在主菜单项上悬停。。
$（'.dropdown menu'）.removeClass（'hide'）；//清除应用于下拉菜单的上一个'hide'类。
});
$（“.下拉菜单LIA”）。单击（函数（事件）{
$（'.dropdown menu'）.addClass（'hide'）；//单击，应用引导程序的类'hide'。
});     
});

javascript的第一个功能是通过单击下拉菜单LIA“清除”以前设置的任何类。当您将鼠标悬停在{.dropdown1 la a}（或.dropdown la a）上时，它将引导的.hide类应用于.dropdown菜单

<script>
  $(document).ready(function () {
      $(".dropdown-menu li a").click(function(event) {
      setTimeout(function (){
      $('.dropdown-menu').addClass('hide');
       }, 100);
    });
  });
</script>

enter cod<div id='etiquette-center-nav'><!-- .goToTop-lg in javascript: --><!-- Sticky window script resides in <head> of etiquette.php page. ID's are referenced in there! -->
<nav id='navigation-etiquette'><!-- role='navigation' can be omitted here. It is only required for the mobile view because of conflict with the main page navigation when cookies are turned on with minification of php files. -->
    <div id='navigation-etiquette-shadow'></div>
    <ul class='nav' itemscope itemtype="http://www.schema.org/SiteNavigationElement"><!-- no 'navbar-nav' class. -->            

       <li id='etiquette-main-buttons' class='dropdown1'><a><span>Etiquette General Concepts</span></a><!--id='etiquette-main-buttons' used in script below to hide menu. See line 48 in index.css  -->
          <ul id='etiquette-dropdown-menu' class='dropdown-menu'>
             <li itemprop="name"><a onclick="toggleHide()" itemprop="url" href='#header-container'><span>Introduction (back to top)</span></a></li><!-- #header-container is inside file: includes/header-start.php -->
             <li itemprop="name"><a onclick="toggleHide()" itemprop="url" href='#general-concepts'><span>General Concepts</span></a></li><!-- Target: #systems-collapse --><!-- Black-Cat-Kenpo -->e here

            <script>
                function toggleHide() {
                    var element = document.getElementById("etiquette-dropdown-menu");
                        element.classList.add("hidden", "hide");
                        element.onmouseleave = function(){
                            element.classList.remove("hidden", "hide");
                        }
                    }
            </script>

<div class='navbar-header'>

        <button id='etiquette-xs-button' type="button" class='navbar-toggle margin-left-10px' data-toggle="collapse" data-target="#navigation-etiquette-collapse"> <!-- Set the data-target equal to the ID name of the div that holds the class of 'navbar-collapse' so that the main navigation menu doesn't collapse as well. #etiquette-xs-button only serves for selecting this button so the toggle of main navigation isn't selected. -->
        <span class='sr-only'>Toggle navigation</span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        <span class='icon-bar'></span>
        </button>

        <div class="navbar-brand">Etiquette shortcut menu:</div>

</div><!-- END '#navbar-header' -->
<div id='navigation-etiquette-collapse' class='collapse navbar-collapse'><!-- ID "navigation-etiquette-collapse' is referenced only for data-target for <button data-toggle="collapse" -->
    <ul class='nav navbar-nav' itemscope itemtype="http://www.schema.org/SiteNavigationElement">

       <li class='dropdown xs-fix-menu'><a href="#" class='dropdown-toggle' data-toggle="dropdown">Etiquette Concepts: (First half) <b class='caret'></b></a>
          <ul class='dropdown-menu'><!-- Don't forget that this <ul> needs class='dropdown-menu' to make it a dropdown menu for mobile -->
             <li itemprop="name"><a itemprop="url" href="#header-container"><span>Introduction (back to top)</span></a></li><!-- #header-container is inside file: includes/header-start.php -->
             <li itemprop="name"><a itemprop="url" href="#general-concepts"><span>General Concepts</span></a></li><!-- Target: #systems-collapse --><!-- Black-Cat-Kenpo -->
             <li itemprop="name"><a itemprop="url" href="#becoming-a-student"><span>Becoming a Student</span></a></li>
             <li itemprop="name"><a itemprop="url" href="#outside-the-martialarts-school"><span>Outside the martial arts school</span></a></li>
             <li itemprop="name"><a itemprop="url" href="#etiquette-and-safety"><span></span>Etiquette when entering school</a></li>
             <li itemprop="name"><a itemprop="url" href="#etiquette-in-the-reception-area"><span>Etiquette in reception area</span></a></li>
             <li itemprop="name"><a itemprop="url" href="#uniform-and-belt"><span>Uniform and Belt</span></a></li>
             <li itemprop="name"><a itemprop="url" href="#advice-from-the-master"><span>Advice from the Master</span></a></li>
             <li itemprop="name"><a itemprop="url" href="#before-the-class-starts"><span>Before the class starts</span></a></li>
             <li itemprop="name"><a itemprop="url" href="#during-class"><span>During class & requirements</span></a></li>               
          </ul>

            <script>    
                  $(document).ready(function () {
                  $('.dropdown-menu a').click(function(event) {
                          $('#etiquette-xs-button.navbar-toggle').click();        
                      });     
                  });
            </script> -->