我修改了一些代码,我发现尝试为我的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并不是我所经历的事情,因此一些明确的专业知识会对您有所帮助。
答案 0 :(得分: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>