Question

我对html知之甚少，我想在点击时打开下拉菜单（dropdown-submenu），但现在它会在悬停时打开。

<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>

Answer 1

使用jquery：

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

禁用悬停并允许在twitter bootstrap中单击子菜单

1 个答案: