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

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 类和打开关闭功能。

此基本脚本有效，但第一个 has-sub 链接无效。

$('#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-sub 和 .has-inner-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>