ホバーを無効にし、twitterのブートストラップでサブメニューをクリックできるようにする

Question

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

Answer 1

使用jqueryの：

(function($){ 
 
\t $(document).ready(function(){ 
 
\t \t $('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) { 
 
\t \t \t event.preventDefault(); 
 
\t \t \t event.stopPropagation(); 
 
\t \t \t $(this).parent().siblings().removeClass('open'); 
 
\t \t \t $(this).parent().toggleClass('open'); 
 
\t \t }); 
 
\t }); 
 
})(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>