非常规引导导航不会在单击时折叠下拉菜单
Posted
技术标签:
【中文标题】非常规引导导航不会在单击时折叠下拉菜单【英文标题】：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) 以尝试许多不同的东西以及来自 *** 的 javascript 解决方案，但我不能让他们中的任何一个工作。 您还应该知道，我使用媒体查询为引导程序引入了单独的移动导航。我不想为此导航添加切换开关，我只是希望 UL 在单击后折叠。
据说，这段代码就是解决方案：
<script>
$(document).ready(function ()
$(".navbar-nav li a").click(function(event)
$(".navbar-collapse").collapse('hide');
);
);
</script>
这显然对我不起作用，因为我不知道 html 结构——尤其是在哪里放置 .navbar-collapse。
而且，如您所见，我使用 onclick 事件（*** 提出的解决方案）让 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>
【问题讨论】：
【参考方案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> -->
【讨论】：
以上是关于非常规引导导航不会在单击时折叠下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章
如何在折叠的导航栏中默认打开 Bootstrap 3 下拉菜单