2017-10-09 99 views
0

我正在嘗試垂直建立引導程序子菜單。一切順利,直到我決定添加第三級子菜單。 3級子菜單不可見。該截圖是在here垂直子菜單不顯示引導程序

的代碼是這樣:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul class="nav nav-pills nav-stacked col-md-5"> 
 
    <li><a href="#">About Us</a></li> 
 
    <li class="active"><a href="#tab_a" data-toggle="pill">Genesis</a></li> 
 
    <li><a href="#tab_b" data-toggle="pill">Mandate</a></li> 
 
    <li><a href="#tab_c" data-toggle="pill">Our Leaders</a></li> 
 
    <li role="presentation" class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
      Organization <span class="caret"></span> 
 
     </a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="/index.php/about-us/organization/governing-council">Governing Council</a></li> 
 
      <li><a href="/index.php/about-us/organization/by-laws">By Laws</a></li> 
 
      <li><a href="/index.php/about-us/organization/moa-rules">MOA &amp; Rules</a></li> 
 
      <li><a href="/index.php/about-us/organization/purchase-procedures">Purchase Procedures</a></li> 
 
      <li><a href="/index.php/about-us/organization/recruitment-rules">Recruitment Rules</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="/index.php/about-us/annual-report">Annual Report</a></li> 
 
    <li class="dropdown"> 
 
     <a class="dropdown-toggle" data-toggle="dropdown" href="#">Glorious Past 
 
     <span class="caret"></span></a> 
 
     <ul class="dropdown-menu"> 
 
      <li role="presentation" class="dropdown"> 
 
       <!-- TV 2020 starts --> 
 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">Technology Vision 2020 
 
        <span class="caret"></span> 
 
       </a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="/index.php/about-us/glorious-past/technology-vision-2020/agriculture">Agriculture</a></li> 
 
        <li><a href="/index.php/about-us/glorious-past/technology-vision-2020/agro-food-processing">Agro-food Processing</a></li> 
 
        <li><a href="/index.php/about-us/glorious-past/technology-vision-2020/healthcare-herbal-natural-products">Healthcare &amp; herbal/natural products</a></li> 
 
        <li><a href="/index.php/about-us/glorious-past/technology-vision-2020/bioprocess-bio-products">Bioprocess &amp; Bio products</a></li> 
 
        <li><a href="/index.php/about-us/glorious-past/technology-vision-2020/mission-reach">Mission Reach</a></li> 
 
       </ul> 
 
      </li> 
 
      <!-- TV 2020 ends --> 
 
      <li><a href="/index.php/about-us/glorious-past/home-grown-technology-programme">Home Grown Technology Programme</a></li> 
 
      <li><a href="/index.php/about-us/glorious-past/collaborative-automotive-r-d-car">Collaborative Automotive R &amp; D (CAR)</a></li> 
 
      <li><a href="/index.php/about-us/glorious-past/synergizing-s-t-with-judicial-processes">Synergizing S &amp; T with Judicial Processes</a></li> 
 
      <li><a href="/index.php/about-us/glorious-past/sugar-technology-mission">Sugar Technology Mission</a></li> 
 
      <li><a href="/index.php/about-us/glorious-past/fly-ash-utilization-programme">Fly Ash Utilization Programme</a></li> 
 
      <li><a href="/index.php/about-us/glorious-past/technopreneur-promotion-programme-tepp">Technopreneur Promotion Programme (TEPP)</a></li> 
 
      <li><a href="/index.php/about-us/glorious-past/umbrella-scheme-on-technology-vision-2020">Umbrella Scheme on Technology Vision 2020</a></li> 
 
      <li><a href="/index.php/about-us/glorious-past/national-innovation-project">National Innovation Project</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="/index.php/about-us/rti">RTI</a></li> 
 
    <li><a href="/index.php/about-us/vigilance">Vigilance</a></li> 
 
    <li><a href="/index.php/about-us/grievance-redressal">Grievance Redressal</a></li> 
 
    <li><a href="/index.php/about-us/rajbhasha">Rajbhasha</a></li> 
 
    <li><a href="/index.php/about-us/transparency">Transparency</a></li> 
 
</ul>

爲科技2020年遠景規劃的子菜單沒有顯示出來。任何一個指針?由於

+0

還有什麼downvote? – Satya

回答

0

這與事件冒泡嵌套子菜單,試着加入該自定義JavaScript,以防止標準的引導行爲做:

$(document).ready(function(){ 
    $('.dropdown-menu a').on("click", function(e){ 
    $(this).next('ul').toggle(); 
    e.stopPropagation(); 
    e.preventDefault(); 
    }); 
});