Question

我尝试修改菜单以获得宽度响应：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 in Width：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;}，它将会像右（但每个子菜单（计算机）都有锁定箭头，必须逐个打开）。

谢谢你提前

Answer 1

删除li中不需要的嵌套UL

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

子菜单JS中的响应箭头

1 个答案: