尝试做出响应的多级菜单

Question

这里一个小脚本是一个小菜单结构

<nav class="main-menu"> 
    <div id="mm-toggle"> 
    <a href="#mm-toggle" id="mm-btn-open">MENU</a> 
    <a href="#close-menu" id="mm-btn-close">MENU</a> 
    <ul> 
     <li><a href="#">Link 1</a></li> 
     <li> 
     <a href="#">Link 2<i class="arrow_toggle"></i></a> 
     <ul> 
      <li> 
      <a href="#">Link 2-1<i class="arrow_toggle"></i></a> 
      <ul> 
       <li> 
       <a href="#">Link 2-1-1</a> 
       </li> 
       <li> 
       <a href="#">Link 2-1-2</a> 
       </li> 
      </ul> 
      </li> 
      <li> 
      <a href="#">Link 2-2<i class="arrow_toggle"></i></a> 
      <ul> 
       <li> 
       <a href="#">Link 2-1-3<i class="arrow_toggle"></i></a> 
       <ul> 
        <li><a href="#">Link 2-1-3-1</a></li> 
       </ul> 
       </li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
    </ul> 
    </div> 
</nav> 

，这里是

.main-menu .has-inner-sub, .has-sub a i { 
    padding: 3px; 
    margin-left: 5px; 
    border: 1px solid white; 
} 
.main-menu .has-sub > a i::after { 
    font-size: 12px; 
    content: '▼'; 
    margin: 0 5px; 
    width: 0; 
    height: 0; 
} 
.main-menu .has-inner-sub > a i::after { 
    font-size: 12px; 
    content: '►'; 
    margin: 0 5px; 
    width: 0; 
    height: 0; 
} 

我试图写的CSS的一小部分脚本让它在小设备上点击时自动添加css类和开关功能。

这个基本的脚本可以工作，但是第一个子链接没有。

$('#mm-toggle > ul > li').has("ul").addClass("has-sub"); 
$('#mm-toggle ul li:not(.has-sub)').has("ul").addClass("has-inner-sub"); 

$('#mm-toggle li.has-inner-sub, #mm-toggle li.has-sub').on('click', function(event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
    $(this).children('ul').toggleClass('show'); 
}); 

基本上，我想才达到每。先后-Sub和。先后-内子将有一个箭头，并在手机上两个主要环节，并且下拉当我点击与小箭头应该工作填充。

上帝，它是更简单的比这长的解释是：d

我想这样的事情，但它的工作原理有点不可思议：

//applying arrows that indicates nested items 
    $('#mm-toggle > ul > li').has("ul").addClass("has-sub"); 
    $('#mm-toggle ul li:not(.has-sub)').has("ul").addClass("has-inner-sub"); 

    // required only for mobile version 
    $('#mm-toggle li.has-inner-sub, #mm-toggle li.has-sub').on('click', function(event) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     $(this).children('ul').toggleClass('show'); 
    }); 

我感谢所有帮助:)

Answer 1

此处感兴趣的点是：

$(this).children('ul').toggleClass('show'); 

改为使用：

$(this).toggleClass('has-sub has-inner-sub').children('ul').toggle(); 

$(function() { 
 
    $('#mm-toggle > ul > li').has("ul").addClass("has-sub"); 
 
    $('#mm-toggle ul li:not(.has-sub)').has("ul").addClass("has-inner-sub"); 
 

 
    $('#mm-toggle li.has-inner-sub, #mm-toggle li.has-sub').on('click', function(event) { 
 
    event.preventDefault(); 
 
    event.stopPropagation(); 
 
    $(this).toggleClass('has-sub has-inner-sub').children('ul').toggle(); 
 
    }); 
 
});

.main-menu .has-inner-sub, .has-sub a i { 
 
    padding: 3px; 
 
    margin-left: 5px; 
 
    border: 1px solid white; 
 
} 
 
.main-menu .has-sub > a i::after { 
 
    font-size: 12px; 
 
    content: '▼'; 
 
    margin: 0 5px; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.main-menu .has-inner-sub > a i::after { 
 
    font-size: 12px; 
 
    content: '►'; 
 
    margin: 0 5px; 
 
    width: 0; 
 
    height: 0; 
 
}

<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script> 
 

 
<nav class="main-menu"> 
 
    <div id="mm-toggle"> 
 
     <a href="#mm-toggle" id="mm-btn-open">MENU</a> 
 
     <a href="#close-menu" id="mm-btn-close">MENU</a> 
 
     <ul> 
 
      <li><a href="#">Link 1</a></li> 
 
      <li> 
 
       <a href="#">Link 2<i class="arrow_toggle"></i></a> 
 
       <ul> 
 
        <li> 
 
         <a href="#">Link 2-1<i class="arrow_toggle"></i></a> 
 
         <ul> 
 
          <li> 
 
           <a href="#">Link 2-1-1</a> 
 
          </li> 
 
          <li> 
 
           <a href="#">Link 2-1-2</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li> 
 
         <a href="#">Link 2-2<i class="arrow_toggle"></i></a> 
 
         <ul> 
 
          <li> 
 
           <a href="#">Link 2-1-3<i class="arrow_toggle"></i></a> 
 
           <ul> 
 
            <li><a href="#">Link 2-1-3-1</a></li> 
 
           </ul> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
       </ul> 
 
      </li> 
 
     </ul> 
 
    </div> 
 
</nav>