Bootstrap 3 - 将菜单悬停在桌面上，但在最小化时单击打开（移动导航）

Question

使用引导程序 3。

我正在尝试使用桌面上的悬停来保持我网站的导航正常工作，但是在使用移动导航时，我希望导航在点击时打开。 我似乎无法让我的选择来处理我所拥有的。 我对 CSS 不是很了解，所以我可能会用一些小的……或大的……把它搞砸。

现在该网站在桌面版本上运行良好，点击打开导航，然后悬停打开剩余的子链接。 问题是当我将页面宽度减小到移动版本时，导航无法正常工作。 我得到的是悬停时打开的导航，但我希望每个链接仅在点击时打开。

我创建了一个 bootply 作为示例： http : //www.bootply.com/tjL1FPgPT4

HTML：

 <!-- Fixed navbar -->
        <div class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">  
                <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">SiteName</a>
        </div>

        <div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">LinkHere<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                    <li class="dropdown-header">Names</li>
                        <li class="menu-item dropdown dropdown-submenu">

                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level1</a>

                            <ul class="dropdown-menu">

                                <li class="menu-item ">
                                    </li><li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level2.1</a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#">Level3-Link1</a>
                                                <a href="#">Level3-Link2</a>
                                            </li>
                                        </ul>
                                    </li>


                                <li class="menu-item ">
                                    </li><li class="menu-item dropdown dropdown-submenu">
                              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level2.2</a>
                                        <ul class="dropdown-menu">
                                            <li>
                                                <a href="#">Level3.1</a>
                                                <a href="#">Level3.2</a>
                                            </li>
                                        </ul>
                                    </li>


                            </ul>

                        </li><li class="menu-item dropdown dropdown-submenu">   
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">OtherLink</a>
                            <ul class="dropdown-menu">

                                <li class="menu-item ">
                                    <a href="#">Link1</a>
                                    <a href="#">Link2</a>
                                </li>


                            </ul>


                        </li>

                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Email</li>
                                <li class="menu-item ">
                                    <a href="#">Yahoo</a>
                                </li>
                    <li role="separator" class="divider"></li>
                    <li class="dropdown-header">Phone</li>
                                <li class="menu-item ">
                                    <a href="#">CallNow</a>
                                </li>






                    </ul>
                </li>
            </ul>



            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>



            <ul class="nav navbar-nav">
                <li class="menu-item dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Drop Down<b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li class="menu-item dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 1</a>
                            <ul class="dropdown-menu">
                                <li class="menu-item ">
                                    <a href="#">Link 1</a>
                                </li>
                                <li class="menu-item dropdown dropdown-submenu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Level 2</a>
                                    <ul class="dropdown-menu">
                                        <li>
                                            <a href="#">Link 3</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>


         </div>
    </div>
</div>
        <!--/.nav-collapse -->

和 CSS：

    /*custom for submenu here*/


.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:hover>.dropdown-menu {
    display:block;
}

.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:#ffffff;
}
.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;
}

 @media only screen and (max-width:767px){
    .dropdown-submenu{
        display: block;
        position: static;
        background-color:transparent;
        border:0 none;
        box-shadow:none;
        margin-top:0;
        width:100%;
    }

    .navbar-nav .dropdown-menu > li > a, 
    .navbar-nav .dropdown-menu .dropdown-header {
        padding:5px 15px 5px 25px;

    }

    .navbar-nav .dropdown-menu > li > a{
        line-height:20px;
    }

    .navbar-default .navbar-nav .dropdown-menu > li > a{
        color:#777;
    }

  .navbar-nav .dropdown-menu .dropdown-submenu > a{
        display:block;
        margin-top: 0;
  }
}

Answer 1

把你的css改成这个

 @media only screen and (min-width:768px){
  .dropdown-submenu:hover>.dropdown-menu {
    display:block;
  }
}

还将此脚本添加到页面。

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

这是更新的bootply 。 希望这对你有帮助。