尝试为响应式多级菜单制作一些脚本

Question

Here is a little menu structure

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

and here is a little part of the 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;
}

I am trying to write a script for it to auto add css classes and open-close function when clicked on small devices.

This basic script works however the first has-sub links doesn't.

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

Basically I would like to achive that every .has-sub and .has-inner-sub will have an arrow, and on mobiles both the main links and the dropdown should work when I click the little arrow with padding.

God it is much more simple than this long explanation :D

I tried something like this, but it works a bit weird:

//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');
  });

I appreciate any help :)

Answer 1

The point of interest here is:

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

Use instead:

$(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 ai { padding: 3px; margin-left: 5px; border: 1px solid white; } .main-menu .has-sub > ai::after { font-size: 12px; content: '▼'; margin: 0 5px; width: 0; height: 0; } .main-menu .has-inner-sub > ai::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>