下拉菜单不会打开 Javascript

Question

致力于将 html 网站转换为自定义 wordpress 主题。这段代码是由其他人编写的，由于我是 JavaScript 新手，所以我无法弄清楚为什么下拉菜单 (.sub-menu) 无法打开。

menu-item-has-children 类是指主菜单项。所以它就像这个 menu-item-has-children -> sub-menu -> links。

我猜所有元素之间的关系都搞砸了？有人可以解决这个问题并提供帮助吗？

我尝试过切换 document.querySelector 抓取的元素

// Menu dropdown script
    let body = document.querySelector("body");
        mainMenu = document.querySelector(".header__menu").querySelector(".header__menu-wrapper"),
        mainMenuItems = mainMenu.querySelectorAll("a.menu-item"),
        mainMenuServicesDropdown = document.querySelector(".sub-menu");
        subMenuBtn = document.querySelector('.menu-item-has-children');

    // Click listener
    mainMenu.addEventListener("click", function() {
        if (event.target === subMenuBtn) {
             event.preventDefault();
            if (window.getComputedStyle(mainMenuServicesDropdown).opacity === "0") {
                mainMenuServicesDropdown.classList.add("header__dropdown--show");
                return;     
            }
            mainMenuServicesDropdown.classList.remove("header__dropdown--show");
        }
    });

我希望下拉菜单可以打开和关闭，并且下拉菜单中的链接可以正常工作

Answer 1

如果有帮助，请查看答案。

小提琴：https://jsfiddle.net/L7obdtc1/

$( document ).ready(function() {
if($(window).width() <= 1199) {

$('.menu-container ul li.menu-item-has-children').click(function() {
$(this).find('.sub-menu').toggle();

});

}else{
$('.menu-container ul li.menu-item-has-children').hover(function() {
$$(this).find('.sub-menu').toggle();
});
}

});

.menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;   
    justify-content: flex-end;   
    align-items: center;
     
}
.menu .menu-item a {
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    padding-top: 16px;
    padding-bottom: 12px;
    margin-right: 35px;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    cursor: pointer;
    }

.sub-menu {
    position: absolute;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
   -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    max-height: 540px;
    width: 80%;
    background-color: #fff;
    list-style-type: none;
    top: 150px;
    left: 110px;
    padding-left: 0;
    overflow: hidden;
    opacity: 1;
  visibility: visible;
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.35);
    display:none;
}

.header__dropdown--show {
  opacity: 1;
  visibility: visible;
  -webkit-transform: translateY(-3px);
  -ms-transform: translateY(-3px);
  transform: translateY(-3px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 
		 


 	
	 <div class="header__menu-wrapper">
	 	 
	 	<nav class="menu-container">
	 	<ul class="menu"><li id="menu-item-79" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-25 current_page_item menu-item-79"><a href="#/" aria-current="page">Home</a></li>
<li id="menu-item-125" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-125"><a href="#">Services</a>
<ul class="sub-menu">
	<li id="menu-item-103" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-103"><a href="#">one</a></li>
	<li id="menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-104"><a href="# ">Two</a></li>	 
</ul>
</li>
<li id="menu-item-81" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-81"><a href="#/">prices</a></li>
<li id="menu-item-82" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-82"><a href="#">lorem</a></li>
<li id="menu-item-83" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-83"><a href="#">about</a></li>
<li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="#">lorem</a></li>
<li id="menu-item-85" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-85"><a href="#">contacts</a></li>
</ul></nav>	  


	</div>
	<!-- /.header__menu-wrapper -->
	 
		 

Answer 2

尝试改用这个：

$(".menu-item-has-children").click(function(event) {
  event.preventDefault();
  $(".sub-menu").toggleClass("header__dropdown--show");
  if ($(".sub-menu").hasClass("header__dropdown--show")) {
    $(".menu-item").unbind("click");
  }
});