引導多級下拉

Question

這是下拉菜單的jsfiddle。 如果單擊任何鏈接，它實際上會將您帶到我正在處理的主頁。 如果您嘗試單擊“人類實踐”下的子菜單，則不會顯示任何內容。

請幫忙，我不明白為什么沒有生成子菜單。 非常感謝。

Here is the fiddle: http Here is the fiddle: //jsfiddle.net/maxgitt/a9vq8v9p/

這是在“人類實踐”中創建子菜單的問題的直接鏈接： http : //2015.igem.org/Template : Michigan

Answer 1

這可能會幫助您或給您一些想法，JS是這樣，因此您的子菜單將在單擊后打開並保持打開狀態。

您不必將打開的子菜單直接放在父菜單的下面，但是如果您不小心將子菜單放置在某個位置，則會在縮小視口后找到該子菜單。 如果需要，在.dropdown-submenu > .dropdown-menu中注釋掉的CSS規則將有助於重新定位子菜單。

 (function($) { $(document).ready(function() { $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { event.preventDefault(); event.stopPropagation(); $(this).parent().siblings().removeClass('open'); $(this).parent().toggleClass('open'); }); }); })(jQuery); 

 .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { /*top: 0; left: 15%;*/ margin-top: 5px; margin-left: -1px; } .navbar .dropdown-submenu, .navbar .dropdown-menu { border-radius: 0; box-shadow: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <nav class="navbar navbar-default" role="navigation"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-1"> <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="#">Project</a> </div> <div class="collapse navbar-collapse" id="navbar-1"> <ul class="nav navbar-nav"> <li><a href="http://2015.igem.org/Team:Michigan/Project">Home <span class="sr-only">(current)</span></a> </li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Project <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="http://2015.igem.org/Team:Michigan/Design">Design</a> </li> <li><a href="http://2015.igem.org/Team:Michigan/Experiments">Experiments &amp; Protocols</a> </li> <li><a href="http://2015.igem.org/Team:Michigan/Results">Results &amp; Discussion</a> </li> <li><a href="http://2015.igem.org/Team:Michigan/Collaborations">Collaborations</a> </li> <li><a href="http://2015.igem.org/Team:Michigan/Parts">Parts</a> </li> </ul> </li> <li><a href="http://2015.igem.org/Team:Michigan/Notebook">Notebook</a> </li> <li><a href="http://2015.igem.org/Team:Michigan/Modeling">Modeling</a> </li> <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Human Practices<b class="caret"></b></a> <ul class="dropdown-menu"> <li><a href="http://2015.igem.org/Team:Michigan/Background">Background</a> </li> <li><a href="http://2015.igem.org/Team:Michigan/Diseases">Diseases and Applications</a> </li> <li><a href="http://2015.igem.org/Team:Michigan/Current">Current Detection Methods</a> </li> <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Informed Design <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="http://2015.igem.org/Team:Michigan/Survey">Survey</a> </li> <li><a href="http://2015.igem.org/Team:Michigan/Chemicals">Biotech/Pharmaceutical Industry</a> </li> <li><a href="http://2015.igem.org/Team:Michigan/Food">Food Science Industry</a> </li> <li><a href="http://2015.igem.org/Team:Michigan/Medical">Medical Practice: Point of Care Testing</a> </li> </ul> </li> </ul> </li> <li><a href="http://2015.igem.org/Team:Michigan/Safety">Safety</a> </li> </ul> </div> </nav>