javascript - 禁用悬停并允许单击 twitter bootstrap 中的子菜单

标签 javascript html css twitter-bootstrap

我对 html 的了解不多，我想在点击时打开下拉菜单(下拉子菜单)，但现在它在悬停时打开。

<div class="col-md-6 col-sm-8">

                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myMenu">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
                    </button>
                </div>


                <div class="collapse navbar-collapse" id="myMenu">
                    <ul class="nav navbar-nav navbar-left">
                        <li><a href="">Home</a>
                        </li>
                        <li><a href="#about">About Me</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Services <span class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu">
                                <li class="dropdown-submenu">
                                <a class="dropdown-toggle disabled" href="#">Doctors<b class="caret"></b></a>
                                   <ul class="dropdown-menu">
                                        <li><a href="">sub 1 </a></li>
                                        <li><a href="">sub 2</a></li>
                                        <li><a href="">sub 3</a></li>
                                    </ul>
                                </li>
                        </li>
                        </ul>
                        </li>

                    </ul>

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

最佳答案

使用jquery:

(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);
.marginBottom-0 {
  margin-bottom: 0;
}

.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;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<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>
   
  </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 Link 1</a></li>
          <li><a href="#">Dropdown Link 2</a></li>
          <li><a href="#">Dropdown Link 3</a></li>
          <li class="divider"></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>
      <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="divider"></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>

关于javascript - 禁用悬停并允许单击 twitter bootstrap 中的子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45499672/

上一篇：html - Safari 不会将 div 设置为其父级高度的 100%

下一篇：jquery - Bootstrap 操作下拉列表在表格响应中不起作用

相关文章：

html - 谷歌浏览器在新标签页中打开链接或打开新窗口时清除当前页面的 CSS 样式

css - 在桌面上隐藏导航元素，仅在移动设备上显示

javascript - Javascript 中的私有(private)成员。它们可以是非静态的吗？

javascript - .change() .css 宽度

javascript - AngularJS - 将数组中具有相同值的对象分组到一个新数组中

javascript - 无法激活基于 JavaScript IE 识别的事件

html - 右侧常用滚动条

php - 服务器端页面如何决定对页面的请求是否被授权？

javascript - IFRAME onload 事件究竟何时触发？

HTML:无法对齐表格单元格

©2024 IT工具网  联系我们