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

ID：（#collapse-me）是我无法在单击时折叠的。我正在使用它进行页面内锚标记链接。我需要html结构和javascript的帮助来使下拉菜单折叠。您可以在这里看到这个操作：http://www.grandmastergeneperceval.com/lineage.php
页面顶部的棕褐色菜单将在您滚动时粘在窗口上，我添加了ID（#collapse-me）尝试了很多不同的东西，以及stackoverflow的javascript解决方案，但是我无法让它们工作。你也应该知道，我使用了媒体查询来拉入一个单独的移动的导航用于引导。我不想为这个导航添加一个切换，我只想让UL在点击后崩溃。
按说，这段代码就是解决方案：

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

这显然不适合我，因为我不知道html的结构- -特别是在哪里放置.navbar-collapse。
而且，正如您所看到的，我使用onclick事件（stackoverflow提出的解决方案）折叠了引导程序导航的移动的版本，而不是使用javascript折叠菜单，但这显然不适用于上面的示例，因为没有按钮切换（我不想使用），而且它是一个悬停事件，而不是单击：

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

这个脚本几乎可以工作。让菜单消失。但是我不能让下拉菜单在100 ms后再次出现。：

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