子菜单JS中的响应箭头答案

【问题标题】：Responsive Arrow in Sub-menu JS子菜单JS中的响应箭头
【发布时间】：2016-08-31 20:14:04
【问题描述】：

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

打开子菜单的Javascript（最大宽度：768px）：

$(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）

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

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

谢谢提前

【问题讨论】：

标签： javascript jquery html css responsive

【解决方案1】：

去掉li里面不需要的嵌套UL

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

【讨论】：