javascript - 重新单击时切换菜单不起作用

Question

我有一个带有这个主题的响应式菜单：https ://splash.stylemixthemes.com/basketball/ in wordpress。在这个主题中，菜单效果很好。在我的网站上，当我单击一个项目时，子菜单会显示。但是当我重新单击子菜单时，它应该被折叠回来。也许这是一个冲突问题。但我不知道如何修复它以及在哪里可以看到问题出在哪里（例如，有没有办法一个一个地停用脚本 js？）谢谢

    function menu () {
      if ($(this).parent("li").hasClass("menu-item-has-children") && !$(this).parent("li").hasClass("active")) {

    $(this).closest("li").siblings().find("ul").slideUp();
    $(this).closest("li").siblings().find("li").toggleClass("active");

    $(this).next("ul").slideDown();
    $(this).parent("li").addClass("active").siblings().toggleClass("active");

    return false;
  }
}

    <div class="stm-mobile-menu-unit" style="display: none;">
    			<div class="inner">
    				<div class="stm-top clearfix">
    					<div class="stm-switcher pull-left">
    											</div>
    					<div class="stm-top-right">
    						<div class="clearfix">
    							<div class="stm-top-search">
    															</div>
    							<div class="stm-top-socials">
    															</div>
    						</div>
    					</div>
    				</div>
    				<ul class="stm-mobile-menu-list heading-font">
    					<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-1754 active"><a href="#"><span>BIG PAGE</span></a>
    						<ul class="sub-menu" style="">
    							<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1755 stm_col_width_default stm_mega_cols_inside_default active"><a href="https://www.mydomain.fr/page-1/"><span>Page 1</span></a></li>
    							<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1757 stm_col_width_default stm_mega_cols_inside_default active"><a href="https://www.mydomain.fr/page-2/"><span>Page 2</span></a></li>
    						</ul>
    					</li>
    					<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-2197 active"><a href="#"><span>BIG PAGE 2</span></a>
    					<ul class="sub-menu" style="display: block;">
    						<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1968 stm_col_width_default stm_mega_cols_inside_default"><a href="https://www.mydomain.fr/page-3/"><span>Page 3</span></a></li>
    						<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2203 stm_col_width_default stm_mega_cols_inside_default"><a href="https://www.mydomain.fr/page-4/"><span>Page 4</span></a></li>
    					</ul>
    					</li>
    					<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2279 active"><a href="https://www.mydomain.fr/galerie-photos/"><span>BIG PAGE 3</span></a></li>
    				</ul>
    			</div>
    		</div>

CSS：

@media only screen and (max-width: 770px) {
  html body.header_4 ul.header-menu li.active:after {
    content: '\f107' !important; }
  html body.header_4 ul.header-menu li.menu-item-has-children {
    padding-right: 40px; }
    html body.header_4 ul.header-menu li.menu-item-has-children:after {
      content: "\f105";
      display: block;
      font-family: 'FontAwesome';
      font-size: 21px;
      position: absolute;
      top: 50%;
      right: 10px;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%); }
    html body.header_4 ul.header-menu li.menu-item-has-children a:after {
      display: none !important; }
    html body.header_4 ul.header-menu li.menu-item-has-children.active > ul.sub-menu {
      visibility: visible !important;
      opacity: 1 !important; }
      html body.header_4 ul.header-menu li.menu-item-has-children.active > ul.sub-menu > li {
        overflow: hidden; }
        html body.header_4 ul.header-menu li.menu-item-has-children.active > ul.sub-menu > li > ul.sub-menu {
          height: 100% !important;
          visibility: visible !important;
          opacity: 1 !important; } }

标签： javascriptmenutoggleresponsive