Попробуйте сделать небольшой скрипт для меню отзывчивым многоуровневого

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> 

и вот небольшая часть из CSS

.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 и функции open-close при нажатии на небольшие устройства.

Этот базовый сценарий работает, однако в первых ссылках есть ссылки.

$('#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'); 
}); 

В основном я хотел бы для того чтобы достигнуть, что каждый .has-юг и .has-внутрипартийный к югу будут иметь стрелку, и на мобильных телефонах как основные звенья и выпадающие должны работать, когда я нажимаю маленькую стрелку обивка.

Бог это гораздо проще, чем это длинное объяснение: 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>