javascript - 子菜单 JS 中的响应箭头

Question

我尝试修复菜单以响应宽度:768px。

用于打开子菜单的 Javascript(最大宽度:768 像素):

$(document).ready(function(){
    $(".slicknav_nav li").click(function(){
        $(this).hasClass("active")?$(".slicknav_nav li").removeClass("active"):($(".slicknav_nav li").removeClass("active"),$(this).addClass("active"))
    });
});

HTML 宽度:768px，点击箭头前

<ul class="slicknav_nav" aria-hidden="false" role="menu">
  <li class="">
    <!-- LOOP MENU 1 , This be change to <li class="active"> when click arrow -->
    <a>Computer</a>
    <!-- HEAD MENU -->
    <div class="sub-menu">
      <ul>
        <!-- LOOP SUB MENU1 -->
        <li class="slicknav_parent slicknav_collapsed">
          <a class="slicknav_item slicknav_row" tabindex="0" aria-haspopup="true" role="menuitem" href="#">
            <span class="slicknav_arrow">►</span>
            <!-- ARROW -->
          </a>
          <ul class="slicknav_hidden" role="menu" aria-hidden="true">
            <li>
              <a>Dekstops</a>
              <!-- SUB-MENU-->
            </li>
          </ul>
        </li>

        <!-- THIS FOR SUB MENU FROM Dekstops -->
        <ul class="slicknav_hidden" role="menu" aria-hidden="true">
          <li>
            <a href="" role="menuitem" tabindex="-1">Desktops & All In One</a>
          </li>
          <li>
            <a href="" role="menuitem" tabindex="-1">Desktop & All In One MSI</a>
          </li>
          <li>
            <a href="" role="menuitem" tabindex="-1">Desktop & All In One Acer</a>
          </li>
          <li>
            <a href="" role="menuitem" tabindex="-1">Desktop & All In One Asus</a>
          </li>
        </ul>

        <!--  THIS LOOPING LIKE DEKSTOPS -->
        <li class="slicknav_collapsed slicknav_parent"></li>
        <!-- LOOP SUB MENU2 -->
        <li class="slicknav_collapsed slicknav_parent"></li>
        <!-- LOOP SUB MENU3 -->

      </ul>
    </div>
  </li>

  <li class=""></li>
  <!-- LOOP MENU 2 -->
  <li class=""></li>
  <!-- LOOP MENU 3 -->
</ul>

非常抱歉，我无法上传所有代码(css)

更多详情请查看here, change width browser to 768px, try second sub-menu (desktops)

左:现在 |对:我想要什么

如果我逐一打开子菜单(计算机)并设置 .slicknav_nav .slicknav_row{display:none;} 它会像 Right(但每个子菜单(计算机)都有锁箭头，必须逐一打开)。

提前致谢

Answer 1

删除 li 中不需要的嵌套 UL

<li class="slicknav_parent slicknav_collapsed"><a>Dekstops</a></li>