ブートストラップのためにマルチレベルのモバイルナビゲーションバーが必要ですNO HOVER

Question

私は立ち往生して不満です。私はホバリングではないモバイルブートストラップメニューが必要です。私はそれがjqueryやjavascriptなしにする必要があります。私はいくつかの例を持っていますが、誰もそれをしていませんこのcodepenは最も近いですが、私はこのメニューを作業しようとしている愚かなsparkpayサイトで働いていないjqueryのビットを使用します。

codepen：http://codepen.io/iamgonge/pen/VpzMXL 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); 

CSS：

.top{height: 150px;}.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;} 


.navbar{background-color: #4F96BA;} 

HTML：

<header class="top"></header> 
<div id="nav"> 
    <nav class="navbar navbar-inverse navbar-static-top marginBottom-0" 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">LOGO</a> 
     </div> 
     <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
     <ul class="nav navbar-nav"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Software <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li class="dropdown dropdown-submenu"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Microsoft Office</a> 
        <ul class="dropdown-menu"> 
         <li class="dropdown dropdown-submenu"> 
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">Microsoft Office 2016</a> 
          <ul class="dropdown-menu"> 
           <li> 
           <a href="/office-2016-home-business.aspx">Office 2016 Home & Business</a> 
           </li> 
           <li> 
           <a href="/office-2016-home-student.aspx">Office 2016 Home & Student</a> 
           </li> 
           <li> 
           <a href="/office-2016-mac.aspx">Office 2016 MAC</a> 
           </li> 
           <li> 
           <a href="/office-2016-pro-plus.aspx">Office 2016 Pro Plus</a> 
           </li> 
           <li> 
           <a href="/office-2016-professional.aspx">Office 2016 Professional</a> 
           </li> 
           <li> 
           <a href="/office-2016-standard.aspx">Office 2016 Standard</a> 
           </li> 
          </ul> 
         </li> 
        </ul> 
        </li> 
       </ul> 

      </li><!--topend--> 


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



<div class="container"> 
    <div class="row"> 
     <h1>You Like It ?</h1> 
     <br> 
    </div> 
</div> 

Answer 1

私はあなたが使用してそのようなメニューをやってのけるに来ることができると思い最も近いですCSSだけでチェックボックスハックを使用しています。ここに、一般的なアイデアを示す簡単なデモがあります。

label, a { 
 
    color: #09c; 
 
    text-decoration: underline; 
 
    cursor: pointer; 
 
} 
 

 
ul ul,input { 
 
    display: none; 
 
} 
 

 
input:checked ~ ul { 
 
    display: block; 
 
}

<nav> 
 
    <ul> 
 
    <li> 
 
     <a href="#">link</a> 
 
    </li> 
 
    <li> 
 
     <input id="input" type="checkbox"> 
 
     <label for="input">menu</label> 
 
     <ul> 
 
     <li> 
 
      <a href="#">link</a> 
 
     </li> 
 
     <li> 
 
      <input id="input2" type="checkbox"> 
 
      <label for="input2">menu</label> 
 
      <ul> 
 
      <li> 
 
       <a href="#">link</a> 
 
      </li> 
 
      <li> 
 
       <input id="input3" type="checkbox"> 
 
       <label for="input3">menu</label> 
 
       <ul> 
 
       <li> 
 
        <a href="#">link</a> 
 
       </li> 
 
       </ul> 
 
      </li> 
 
      </ul> 
 
     </li> 
 
     </ul> 
 
    </li> 
 
    <li> 
 
     <a href="#">link</a> 
 
    </li> 
 
    </ul> 
 
</nav>