文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >Bootstrap响应多级导航菜单

问Bootstrap响应多级导航菜单
EN

Stack Overflow用户
提问于 2016-12-10 19:25:37
回答 1查看 917关注 0票数 0

我已经为bootstrap编写了一个多级导航菜单。它在1200px和更高的像素下工作良好。但当屏幕尺寸低于1200px (我已将1200px设置为breapoint)时，第一级下拉菜单会在单击时打开/关闭，但第二级下拉菜单不会在单击时打开。我希望这个第二级下拉菜单打开屏幕尺寸低于1200当它的父锚被点击时。例如，当点击“服务”>“美容牙科”时，屏幕尺寸小于1200px，我希望其中的“.下拉菜单”(牙科卫生、假牙等)显示/切换显示(再次单击时隐藏)。我如何才能做到这一点？

这是HTML：

代码语言：javascript
复制
    <nav id="navbar" class="navbar navbar-default" role="navigation">
        <div class="container">
            <div class="navbar-inner">
              <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav navbar-left">
                    <li><a href="#">Home</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <i class="fa fa-angle-down"></i></a>
                            <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item"><a href="#">Nervous Patients Care</a></li>
                             </ul>
                      </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Team <i class="fa fa-angle-down"></i></a>
                      <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item"><a href="#">Nervous Patients Care</a></li>
                             </ul>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Offers/Fees <i class="fa fa-angle-down"></i></a>
                      <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item"><a href="#">Nervous Patients Care</a></li>
                             </ul>
                    </li>
                    <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Patients <i class="fa fa-angle-down"></i></a>
                      <ul class="dropdown-menu">
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Cosmetic Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">General Dentistry <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Braces <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Implants <i class="fa fa-angle-right"></i></a>
                                    <ul class="dropdown-menu">
                                        <li class="menu-item"><a href="#">Dental Hygiene</a></li>
                                        <li class="menu-item"><a href="#">Crowns & Bridges</a></li>
                                        <li class="menu-item"><a href="#">Dentures</a></li>
                                    </ul>
                                </li>
                                <li class="menu-item"><a href="#">Nervous Patients Care</a></li>
                             </ul>
                    </li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Referrals</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
              </div>
          </div><!-- end navbar-inner -->
       </div><!-- end container -->
    </nav><!-- end navbar -->

CSS：

代码语言：javascript
复制
#navbar {
    clear: both;
    border-radius: 0;
    border: 0;
    margin: 0;
    background: #f9f9f9;
    height: auto;
}
#navbar li a {
    text-transform: uppercase;
    font-weight: 700;
    font-size: 14px;
    color: #575757;
    padding-top: 20px;
    padding-bottom: 20px;
}
#navbar li a:hover {
    color: #7bcfdc
}

.dropdown-menu {
    box-shadow: none;
    border-radius: 0;
    border: 0;
    width: 240px;
    padding: 0;
}
.dropdown-submenu {
    position:relative;
    border-radius: 0;
    padding: 0;
}
.dropdown-submenu>.dropdown-menu {
    top:0;
    left:100%;
    margin-top:-1px;
    margin-left:-1px;
}
.dropdown-submenu.pull-left {
    float:none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
    left:-100%;
    margin-left:10px;
}

#navbar .navbar-nav li a i {
    margin-left: 5px;
}
#navbar .navbar-nav li li a{
    background: #eee;
    text-transform: none;
    padding-top: 11px;
    padding-bottom: 11px;
}
#navbar .navbar-nav li li {
    position: relative;
}
#navbar .navbar-nav li li i {
    position: absolute;
    right: 20px;
    top: 14px;
}
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a {
    background: #e5e5e5;
}
#navbar .navbar-nav li li a:hover,
#navbar .navbar-nav li .dropdown-submenu .dropdown-menu a:hover
{
    background: #ff4e4f;
    color: #FFF;
}



/*----- RESPONSIVE STYLES ------*/
@media screen and (max-width: 1199px) {
    #navbar .dropdown-menu {
        width: 100%;
        position: relative;
    }
}
@media screen and (max-width: 768px) {
    .header-top p {
        text-align: center;
    }
    .header-top a {
        margin: 10px auto 0 auto;
        clear: both;
        display: block;
    }
}
@media screen and (min-width: 1200px) {
    #navbar .dropdown:hover > .dropdown-menu {
        display: block;
    }
    .dropdown-submenu:hover>.dropdown-menu {
        display:block;
    }
}

我为此做了一个JSFiddle：

https://jsfiddle.net/Lefosx46/

javascript
jquery
html
css
twitter-bootstrap
EN

回答 1

Stack Overflow用户

发布于 2016-12-10 21:16:38

我看了你的代码。有很多事情要做，所以虽然我的答案应该是有效的，但可能有更有效的方法来做。它至少可以为你指明正确的方向。

似乎有一个问题：

代码语言：javascript
复制
@media screen and (max-width: 1199px) {
    #navbar .dropdown-menu {
        width: 100%;
        position: relative;
    }
}

我删除了它，并添加了：

代码语言：javascript
复制
@media screen and (max-width: 1199px) {
    .dropdown-submenu:hover .dropdown-menu {
      display: block;
    }
}

你可以在这里看到一把小提琴：https://jsfiddle.net/t4rnz8dg/

如果我误解了你的问题，很抱歉！

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/41074992

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档