文章/答案/技术大牛

发布

社区首页 >问答首页 >自举下拉菜单在移动设备上不工作

问自举下拉菜单在移动设备上不工作
EN

Stack Overflow用户

提问于 2019-06-10 07:09:02

回答 2查看 4.4K关注 0票数 0

我在我的网站上添加了一个下拉列表，但是当导航条崩溃时，它在移动设备上不能正常工作。当我点击下拉时，它关闭肚脐，而不是显示在下拉列表下的项目。

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <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" href="#page-top">Name</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#portfolio">Portfolio</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Games <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/Spikes" target="_blank">Avoid The Spikes</a></li>
                        <li><a href="/SpaceShooter" target="_blank">Space Shooter</a></li>
                        <!--<li role="separator" class="divider"></li>-->
                        <!--<li class="dropdown-header">Nav header</li>-->
                        <!--<li><a href="#">Separated link</a></li>-->
                    </ul>
                </li>
                </ul>
                </div>
</div>

twitter-bootstrap-3

javascript

jquery

twitter-bootstrap

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-06-10 07:22:51

这就是你要找的吗？带子菜单的Navbar

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

.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;
}


/*
@media (min-width: 768px) { 
}
@media (min-width: 992px) { 
}
@media (min-width: 1200px) { 
}
*/

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container pen">
    <div class="row">
      <div class="col-sm-12">

        <nav class="navbar navbar-default" role="navigation">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
                    <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" href="#" target="_blank">Brand</a>
          </div>

          <div class="collapse navbar-collapse" id="navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Active Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown 1</a></li>
                  <li><a href="#">Dropdown 2</a></li>
                  <li><a href="#">Dropdown 3</a></li>
                  <li class="divider"></li>
                  <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 4</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown Submenu 4.1</a></li>
                      <li><a href="#">Dropdown Submenu 4.2</a></li>
                      <li><a href="#">Dropdown Submenu 4.3</a></li>
                      <li><a href="#">Dropdown Submenu 4.4</a></li>
                    </ul>
                  </li>
                  <li class="dropdown dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown 5</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown Submenu 5.1</a></li>
                      <li><a href="#">Dropdown Submenu 5.2</a></li>
                      <li><a href="#">Dropdown Submenu 5.3</a></li>
                      <li class="divider"></li>
                      <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4</a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown Submenu 5.4.1</a></li>
                          <li><a href="#">Dropdown Submenu 5.4.2</a></li>
                          <li class="divider"></li>
                          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.3</a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Dropdown Submenu 5.4.3.1</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.3.2</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.3.3</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.3.4</a></li>
                            </ul>
                          </li>
                          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu 5.4.4</a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Dropdown Submenu 5.4.4.1</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.4.2</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.4.3</a></li>
                              <li><a href="#">Dropdown Submenu 5.4.4.4</a></li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
                <ul class="dropdown-menu">
                  <li><a href="#">Dropdown Link 1</a></li>
                  <li><a href="#">Dropdown Link 2</a></li>
                  <li><a href="#">Dropdown Link 3</a></li>
                  <li class="dropdown dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown Submenu Link 4.1</a></li>
                      <li><a href="#">Dropdown Submenu Link 4.2</a></li>
                      <li><a href="#">Dropdown Submenu Link 4.3</a></li>
                      <li><a href="#">Dropdown Submenu Link 4.4</a></li>
                    </ul>
                  </li>
                  <li class="dropdown dropdown-submenu">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a>
                    <ul class="dropdown-menu">
                      <li><a href="#">Dropdown Submenu Link 5.1</a></li>
                      <li><a href="#">Dropdown Submenu Link 5.2</a></li>
                      <li><a href="#">Dropdown Submenu Link 5.3</a></li>
                      <li class="divider"></li>
                      <li class="dropdown dropdown-submenu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a>
                        <ul class="dropdown-menu">
                          <li><a href="#">Dropdown Submenu Link 5.4.1</a></li>
                          <li><a href="#">Dropdown Submenu Link 5.4.2</a></li>
                          <li class="divider"></li>
                          <li class="dropdown dropdown-submenu">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li>
                            </ul>
                          </li>
                          <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a>
                            <ul class="dropdown-menu">
                              <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li>
                              <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li>
                            </ul>
                          </li>
                        </ul>
                      </li>
                    </ul>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
          <!-- /.navbar-collapse -->
        </nav>

      </div>
    </div>
  </div>
</body>

</html>

票数 1

Stack Overflow用户

发布于 2019-06-10 08:01:05

您的script和link标记被错误地放置在代码片段中。这些标记应该放在您的HTML文件中。链接标记必须将放置在head标记中。我对你的问题进行了编辑，认为你犯了一个错误，但是把这些标签放在它们所属的地方就能达到预期的效果：

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">

<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header page-scroll">
            <button type="button" class="navbar-toggle" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1">
                <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" href="#page-top">Name</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="hidden">
                    <a href="#page-top"></a>
                </li>
                <li class="page-scroll">
                    <a href="#portfolio">Portfolio</a>
                </li>
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Games <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="/Spikes" target="_blank">Avoid The Spikes</a></li>
                        <li><a href="/SpaceShooter" target="_blank">Space Shooter</a></li>
                        <!--<li role="separator" class="divider"></li>-->
                        <!--<li class="dropdown-header">Nav header</li>-->
                        <!--<li><a href="#">Separated link</a></li>-->
                    </ul>
                </li>
                </ul>
                </div>
</div>

票数 0

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

原文链接：

https://stackoverflow.com/questions/56521980

复制

相似问题

问自举下拉菜单在移动设备上不工作
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自举下拉菜单在移动设备上不工作EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问自举下拉菜单在移动设备上不工作
EN