带有 javascript 的 Wordpress 100% 宽度下拉菜单

Question

我已经修改了一些我发现的代码，以尝试为我的 wordpress 菜单实现 100% 宽度的下拉菜单。

我的问题是我的 wordpres 菜单有这样的结构，子菜单 ul 嵌套在我的导航列表中。

<li><a href="">menu-1</a> 
<ul class="sub-menu">
<li>sub 1</li>
<li>sub 2</li>
</ul>
</li>

只有当我的子菜单没有像这样嵌套在顶级导航列表中时，下拉菜单才会起作用。

<li><a href="">menu-1</a> </li>
<ul class="sub-menu">
<li>sub 1</li>
<li>sub 2</li>
</ul>

My fiddle of the drop working on menu 1 and not working on menu 2

请告知如何解决这个问题，我该如何更改我的 wordpress 菜单结构，或者最好如何更改我的脚本，以便下拉菜单适用于当前的 html 结构。

Javascript 不是我的经验，所以一些明确的专业知识会有所帮助。

Answer 1

我从您的小提琴中取出代码并将其插入此处。 jquery 'next' 仅适用于下一个兄弟。第二个菜单 html 结构将第二个子菜单放在 li 之外，因此它不是同级菜单，并且在触发时找不到附加幻灯片动画。

var stop = true;
var hovered;
var timeout;

$('.menu-item').hover(
    function(){
        
        clearTimeout(timeout);
        stop = true;
        hovered = this;
        timeout = setTimeout(function() {
        if($(hovered).hasClass('menu-item')){
            $('.sub-menu').css({'z-index': 0});
            $(hovered).next('.sub-menu').css({'z-index': 5});
            hovered = $(hovered).next('.sub-menu').slideDown(350);
            timeout = setTimeout(function(){
                $('.sub-menu').not($(hovered).next('.sub-menu')).slideUp(350);  
            },200);
        }
        else
            $('.sub-menu').slideUp(350);    
        },400);
    },
    function(e){
        stop = false;
        clearTimeout(timeout);
        setTimeout(function(){
            if(!stop)
                $('.sub-menu').slideUp(350);
        },500);
    }
);

$('.sub-menu').hover(
    function(){
        stop = true;    
    },
    function(){
        
    }
);

$('#menu-main-navigation').hover(
    function(){

    },
    function(){
        timeout = setTimeout(function(){
            $('.sub-menu').slideUp(350);
        },200);
    }
);

* {   
margin: 0;
padding: 0;
}
    #menu-main-navigation {
        position: absolute;
        display: block;
        height: 80px;
        width: 100%;
        background: orange;
    }
    #menu-main-navigation li {
        list-style-type: none;
        text-decoration: none;
        vertical-align: middle;
        height: 80px;
        display: inline-block;
        position: relative;
    }
    #menu-main-navigation .menu-item a {
        color: black;
        font-size: 18px;
        height: 0;
        font-family: Arial;
        vertical-align: baseline;
        position: relative;
        display: inline-block;
        height: auto;
        padding: 29px;
    }
    #menu-main-navigation .menu-item a:hover {
        background: rgba(0, 0, 0, 0.4);
        color: #FFF;
        transition: all .2s;
    }
   #menu-main-navigation .menu-item a:hover .arrow.down {
        border-top-color: #FFF;
    }

    .sub-menu:hover {
        display: block !important;
        width: 100%;
        height: auto !important;
        position: absolute;
    }
     .sub-menu:hover {
        display: block !important;
        width: 100%;
        height: auto !important;
        position: absolute;
    }
    .sub-menu {
        width: 100%;
        height: auto;
        background: gray;
        display: none;
        position: absolute;
    }
 .sub-menu {
    
    border-bottom: 2px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu-main-navigation" class="menu">
 
    <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://localhost:8888/chat-headsets/">menu 1</a>
    </li>
           <ul class="sub-menu" id="s1">
	<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267"><a href="">item 1</a></li>
	<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593"><a href="">item 2</a></li>
		<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267"><a href="">item 3</a></li>
	<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593"><a href="">item 2</a></li>
</ul>

    <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-22"><a href="http://localhost:8888/chat-headsets/">menu 2</a>
     </li>
        <ul class="sub-menu" id="s2">
	<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267"><a href="">item 1</a></li>
	<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593"><a href="">item 2</a></li>
		<li id="menu-item-7267" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7267"><a href="">item 3</a></li>
	<li id="menu-item-7593" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7593"><a href="">item 2</a></li>
  
  
</ul>