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

Question

我正在尝试创建一个手风琴，单击该手风琴将显示它的子链接。

因此在下面的演示中，单击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');
    $(".hs-menu-children-wrapper").hasClass('menu_hidden').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>
      </ul>
    </li>
  </ul>
</div>

也是HubSpot菜单，因此不能过多更改标记（这就是为什么我使用.append()的原因]

Answer 1

更改

$(".hs-menu-children-wrapper").hasClass('menu_hidden').removeClass('menu_hidden');
    $(".hs-menu-children-wrapper").addClass('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');

  });

Jsfiddle：https://jsfiddle.net/swq3zuhc/

您需要检查对象是否具有该类，然后将其删除。将所有内容全部放在一行中是无效的JQuery。