Bootstrap 3.3.5中的多层下拉

J86 发表于 Dev

J86

我有以下HTML代码，并根据Bootstrap文档中的标记将其结构化为我认为应该实现的方式。

<div id="navbar" class="navbar-collapse collapse">
  <ul class="nav navbar-nav">
    <li class="active">
      <a href="#">Home</a>
    </li>

    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Hospital<span class="caret"></span></a>

      <ul class="dropdown-menu">
        <li class="dropdown">
          <a href="#">Consultants <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Adult cardiac surgery</a></li>
            <li><a href="#">Bariatric surgery</a></li>
            <li><a href="#">Colorectal surgery</a></li>
            <li><a href="#">Endocrine and thyroid surgery</a></li>
            <li><a href="#">Head and neck cancer surgery</a></li>
            <li><a href="#">Interventional cardiology</a></li>
            <li><a href="#">Lung Cancer</a></li>
            <li><a href="#">Neurosurgery</a></li>
            <li><a href="#">Orthopaedic surgery</a></li>
            <li><a href="#">Upper gastro-intestinal surgery</a></li>
            <li><a href="#">Urological surgery</a></li>
            <li><a href="#">Vascular surgery</a></li>
          </ul>
        </li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li class="dropdown-header">Nav header</li>
        <li><a href="#">Separated link</a></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>
</div>

但是，这不起作用，它给了我这个：

当我单击“顾问”时，它完全摆脱了下拉菜单。可以仅使用Bootstrap CSS / JS来实现多级下拉菜单吗？还是我们必须为此编写自定义CSS？

任何简单的解决方案都可以像单个嵌套级别一样工作，并且具有响应性和触摸友好性（适用于平板电脑和手机）吗？

谢谢

希拉里

我不记得引导程序3具有3级下拉导航菜单的任何默认示例，但是您可以这样做，只需一点定制和Java脚本，它就可以完全响应。

的HTML

<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
        <li class="active"> <a href="#">Home</a>
        </li>
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Hospital<b class="caret"></b></a>
            <ul class="dropdown-menu">
                <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Consultants</a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Adult cardiac surgery</a>
                        </li>
                        <li><a href="#">Bariatric surgery</a>
                        </li>
                        <li><a href="#">Colorectal surgery</a>
                        </li>
                        <li><a href="#">Endocrine and thyroid surgery</a>
                        </li>
                        <li><a href="#">Head and neck cancer surgery</a>
                        </li>
                        <li><a href="#">Interventional cardiology</a>
                        </li>
                        <li><a href="#">Lung Cancer</a>
                        </li>
                        <li><a href="#">Neurosurgery</a>
                        </li>
                        <li><a href="#">Orthopaedic surgery</a>
                        </li>
                        <li><a href="#">Upper gastro-intestinal surgery</a>
                        </li>
                        <li><a href="#">Urological surgery</a>
                        </li>
                        <li><a href="#">Vascular surgery</a>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Another action</a>
                </li>
                <li><a href="#">Something else here</a>
                </li>
                <li role="separator" class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a>
                </li>
                <li><a href="#">One more separated link</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

的CSS

.dropdown-submenu {
    position:relative;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-6px;
    margin-left:-1px;
    -webkit-border-radius:0 6px 6px 6px;
    -moz-border-radius:0 6px 6px 6px;
    border-radius:0 6px 6px 6px;
}
.dropdown-submenu>a:after {
    display:block;
    content:" ";
    float:right;
    width:0;
    height:0;
    border-color:transparent;
    border-style:solid;
    border-width:5px 0 5px 5px;
    border-left-color:#cccccc;
    margin-top:5px;
    margin-right:-10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color:#555;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
    -webkit-border-radius:6px 0 6px 6px;
    -moz-border-radius:6px 0 6px 6px;
    border-radius:6px 0 6px 6px;
}

(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);

工作范例

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。