在我为导航栏创建一个slideDown子菜单后，我终于完成了我想要的效果。但是当我将完成的代码插入到我的主代码中时（因为我最初在codepen上只用一个选项卡测试/创建它），子菜单向下滑过主要li的顶部，单击下方以显示子菜单。我还注意到，如果我点击不同的li（在主导航上），它将不会隐藏菜单。
这是我的整个侧边栏的代码集：http://codepen.io/PorototypeX/pen/swvtc
有些人在一个不同的问题上我也要求在这里发布代码，很抱歉，如果你的口味有点冗长。
HTML：
<div class="backing">
<ul class="navbar" id="topnav">
<li class="active">
<a>HOME</a>
<!-- Below this is the code for the submenu. For now I just put in example names for testing. eventually I will have a submenu for each li after I get this working on the first li -->
<ul class="menu-home">
<li><a href="#"><span>Home</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Info</span></a></li>
</ul>
</li>
<li>
<a>OUR CHAPTER</a>
</li>
<li>
<a>ABOUT US</a>
</li>
<li>
<a>DESIGN BRIEF</a>
</li>
<li>
<a>MEMBERS</a>
</li>
<li>
<a>EVENTS</a>
</li>
<li>
<a>COMPETITIONS</a>
</li>
<li>
<a>CONTACT INFO</a>
</li>
<li>
<a>JOIN US</a>
</li>
</ul>
<!-- --------------------------------------------------------------------------------------- -->
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
CSS：
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
.backing {
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
}
.navbar {
padding: 0;
margin: 0;
width: 100%;
display: inline;
list-style-type: none;
position: relative;
top: 86.62px;
text-align: center;
}
.navbar > li {
background: #3F4A4F;
height: 50px;
border-top: 1px solid #8A8A94;
border-bottom: 1px solid black;
}
.navbar a {
color: #EDEDED;
font-family: 'Open Sans', sans-serif;
font-size: 140%;
width: 100%;
height: 100%;
line-height: 50px;
display: block;
outline: 0;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s linear;
-webkit-transition: all 0.3s linear;
border-left: 5px solid transparent;
}
li.active a {
color: #EC6E00;
border-left: 5px solid #EC6E00;
background-color: #323C40;
outline: 0;
}
.navbar > li:not(.active):hover a {
color: #FAFAFA;
border-left: 5px solid #FAFAFA;
background-color: #323C40;
}
/*The background/container for the entire navigation section. I would like to possibly see if the height of this can also expand to the given height of the submenu when they drop down. but thats obviously not the main issue currently*/
div.backing {
background-color: #687C85;
margin: 0;
padding: 0;
height: 576.62px;
width: 262.5px;
display: block;
position: absolute;
box-shadow: 4px 4px 20px black;
}
ul[class^="menu"] {
list-style-type: none;
padding: 0;
}
ul[class^="menu"] a {
color: white;
background-color: #51595C;
position: relative;
text-decoration: none;
line-height: 35px;
font-size: 110%;
display: block;
border-left: 5px solid #0055BA;
z-index: 1;
}
ul[class^="menu"] a:before {
content: "";
background-color: #0055BA;
position: absolute;
left: 0px;
height: 35px;
width: 0px;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
z-index: -1;
}
ul[class^="menu"] a:hover:before {
width: 100%;
}
ul[class^="menu"] a:hover span {
color: white;
transition-delay: 0.09s;
z-index: 1;
}
ul[class^="menu"] span {
z-index: 3;
}
ul[class^="menu"] {
display: none;
}
JQuery的：
$(document).ready(function(){
//Code so that when a link is clicked from the main nav it will slide down/slide up the submenu
$("#topnav a").click(function(){
$(this).next().slideUp();
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
});
//This is so that when you click on other li in the #topnav menu, it will switch it to the "active" class which will slide down the submenu (since it was clicked on) and slide up if clicked again
$("ul.navbar > li").click(function () { $(this).siblings().removeClass('active');
$(this).addClass('active');
});
});
答案 0 :(得分：1)
取出height: 50px上的固定.navbar > li解决了问题，或将其更改为min-height。
这对我来说很困惑，因为它在视觉上看起来像子菜单position: absolute - 但它确实与z索引相关。包含li的内容因此溢出，但z-indexing使其显示在其他列表项的上方。
答案 1 :(得分：0)
您可以使用一个函数执行slideUp / slideDown事件，还可以更改当前活动的li：
$("#topnav a").click(function(){
var el = $(this).parent();
if(el.parent().hasClass('navbar')){
$(this).next().slideDown();
var active = el.siblings('.active');
active.children('ul:first').slideUp();
active.removeClass('active');
el.addClass('active');
}
});
您可以查看一个工作示例here。
答案 2 :(得分：0)
非常感谢@BotskoNet帮助我处理li高度问题，感谢@Dudu关于子菜单没有与其他li关闭的问题。在摆弄了@dudu的代码后，我能够将活动类的问题也滑动到slideUp和slideDown子菜单。
这就是我的意思：
$("#topnav a").click(function(){
var el = $(this).parent();
if(el.hasClass('active') && $(this).next().is(':visible')){
var active = el.siblings('.active');
$(this).next().slideUp();
}
else if(el.hasClass('active') && !$(this).next().is(':visible')){
var active = el.siblings('.active');
$(this).next().slideDown();
}
else if(!el.hasClass('active')){
$(this).next().slideDown();
var active = el.siblings('.active');
active.children('ul:first').slideUp();
active.removeClass('active');
el.addClass('active');
}
});
现场演示如果你想看到它（只有第一个标签）：http://codepen.io/PorototypeX/pen/swvtc