汉堡包上的手风琴（未显示子链接）

Question

我正在尝试创建一个手风琴，单击它会显示它的子 links。

所以在我下面的演示中，点击 parent，我试图显示 child。

$(function() {

  // add icon on hamburger
  $(".hs-item-has-children").append('<i></i>');
  $(".hs-menu-children-wrapper").addClass('menu_hidden');


  // on click, check if dropdown is down already
  $(".hs-item-has-children").click(function() {

    //$('.hs-menu-children-wrapper').toggleClass('menu_is_visibile');
    if ($(".hs-menu-children-wrapper").hasClass('menu_hidden'))
      $(".hs-menu-children-wrapper").removeClass('menu_hidden');
      $(".hs-menu-children-wrapper").addClass('menu_is_visibile');
  });
});

.menu li.hs-item-has-children i {
  display: block;
  position: absolute;
  margin-top: 16px;
  right: 50px;
  margin-top: -28px;
}

.menu li.hs-item-has-children i {
  display: block;
}


.menu li.hs-item-has-children i:before,
.menu li.hs-item-has-children i:after {
  content: "";
  position: absolute;
  background-color: #ff6873;
  width: 3px;
  height: 9px;
}

.menu li.hs-item-has-children i:before {
  transform: translate(-2px, 0) rotate(45deg);
}

.menu li.hs-item-has-children i:after {
  transform: translate(2px, 0) rotate(-45deg);
}

.menu li.hs-item-has-children ul.hs-menu-children-wrapper.menu_hidden {
  display: none !important;
}

.menu li.hs-item-has-children ul.hs-menu-children-wrapper.menu_is_visibile {
  display: block !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
  <ul>
  
    <li class="hs-item-has-children" role="menu"><a href="javascript:void(0)">Parent</a>
      <ul class="hs-menu-children-wrapper menu_hidden">
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
      </ul>
    </li>
    
    <li class="hs-item-has-children" role="menu"><a href="javascript:void(0)">Parent 2</a>
      <ul class="hs-menu-children-wrapper menu_hidden">
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
        <li class="hs-menu-item"><a href="javascript:void(0)">Child</a></li>
      </ul>
    </li>
    
  </ul>
</div>

它也是一个 HubSpot 菜单，所以不能过多地改变标记（这就是我使用 .append() 的原因）

编辑：

正在尝试仅显示选定的父 link 的子 link。 IE。如果我在上面的演示中单击 Parent 2，则只显示 ul 的子 link（目前都打开）。

Answer 1

将您的函数更改为：

  $(".hs-item-has-children").click(function() {
  $(this).children('.hs-menu-children-wrapper').toggleClass('menu_is_visibile');
  });

Jsfiddle：https://jsfiddle.net/ukowjqav/1/

您可以切换 class 本身来查看每个 parent 的 children，而不是使用 if-else。另请注意，我在函数中使用 this。这样代码就知道它引用的是哪个特定项目。希望这有帮助。

汉堡包上的手风琴（未显示子链接）

Accordion on hamburger (Child links not displaying)

html

javascript

jquery

jquery-ui-accordion

hubspot