我需要一个多层次的移动导航栏的引导没有悬停

Question

我被卡住了，很沮丧。我需要一个移动引导菜单，不是悬停。我需要它没有任何jquery或javascript。我有几个例子，但没有一个这样做。这个代码是最接近的，但是它使用了一些jquery，这个jquery在愚蠢的sparkpay网站上不起作用，而我正在尝试让这个菜单起作用。

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

我认为最接近的方法就是使用checkbox hack来完成这样的菜单。这里有一个简单的演示，说明了一般的想法。

​

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>

​