非常规引导导航不会在单击时折叠下拉菜单答案

【问题标题】：Unconventional Bootstrap Navigation doesn't collapse dropdown on click非常规引导导航不会在单击时折叠下拉菜单
【发布时间】：2016-04-19 02:09:04
【问题描述】：

<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 提出的解决方案）让 MOBILE 版本的引导导航折叠，而不是使用 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;
}

这个脚本几乎可以工作。使菜单消失。但我无法让 .dropdown-menu 在 100 毫秒后再次出现。：

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

【问题讨论】：

标签： twitter-bootstrap drop-down-menu navigation anchor collapse

【解决方案1】：

javascript 的第一个功能是通过单击 .dropdown-menu li a 来“清除”之前设置的任何类。当您将鼠标悬停在 {.dropdown1 la a}（或 .dropdown la a）上时，它会将引导程序的“.hide”类应用于 .dropdown-menu。

<nav id='navigation-lineage' role='navigation'>
    <div id='navigation-lineage-shadow'></div> 
    <div class='navbar-header'>
        <button id='lineage-xs-button' type="button" class='navbar-toggle' data-toggle="collapse" data-target="#collapse-me"> 
        </button>
    </div><!-- END '#navbar-header' --->
    <ul class='nav'><!-- no 'navbar-nav' class. -->
       <li class='dropdown1'><a><span>Martial Arts History</span>    </a><!-- see NOTES below. href tag is omitted only for desktop view (no toggle). -->
          <ul class='dropdown-menu'>
             <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 navbar-collapse'><a><span>Systems descended from Gene Perceval:</span></a><!-- see NOTES below. href tag is omitted only for desktop view (no toggle). -->
          <ul class='dropdown-menu'>
             <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><!-- Target: #systems-collapse --><!-- Black-Cat-Kenpo -->
             <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>
            <script>
                  $(document).ready(function () {
                      $(".dropdown1").hover(function(event) { //hover on main menu item..
                          $('.dropdown-menu').removeClass('hide'); //clear previous 'hide' class applied to dropdown-menu.
                      });
                      $(".dropdown-menu li a").click(function(event) {                            
                          $('.dropdown-menu').addClass('hide'); //On click, apply bootstrap's class 'hide'.       
                      });     
                  });
            </script>
       </li>
    </ul> 
</nav><!-- END '#navigation-lineage --->

【讨论】：

【解决方案2】：

使用纯javascript，在菜单项的HTML代码中使用onclick功能：

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>

【讨论】：

【解决方案3】：

对于引导 MOBILE 导航....这仅在添加 jquery 库时有效，并且脚本（如下）必须紧跟在 UL 标记之后：

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

【讨论】：