css - 垂直子菜单不显示 Bootstrap

Question

我正在尝试垂直构建 Bootstrap 子菜单。一切顺利，直到我决定添加第 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>

Technology Vision 2020 的子菜单未显示。任何指针任何人？谢谢

Answer 1

这与嵌套子菜单时的事件冒泡有关，尝试添加此自定义 javascript 以防止默认 Bootstrap 行为:

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