对于我的主导航,我有一个嵌套的ul,它在单击“产品”时仅显示前6 li。当用户单击“产品”时如何显示它们?是CSS问题还是脚本问题?这是屏幕截图。
HTML:
<nav>
<a class="burger_nav"></a>
<span id="logo_link">
<a href="#"><img src="images/nav_logo.gif" alt="Company logo. Links to home page." width="100%"></a>
</span>
<ul>
<span id="phonly"><li><a href="#">Home</a></li></span>
<li><a class="sub_drop">Products</a>
<ul>
<li><a href="#">Resilient Floor</a></li>
<li><a href="#">Wood Floor</a></li>
<li><a href="#">Food Service</a></li>
<li><a href="#">Dilution Control</a></li>
<li><a href="#">Carpet Care</a></li>
<li><a href="#">General Cleaners</a></li>
<li><a href="#">Disinfectants</a></li>
<li><a href="#">Industrial</a></li>
<li><a href="#">Restroom Care</a></li>
<li><a href="#">Hand Care</a></li>
<li><a href="#">Laundry Care</a></li>
<li><a href="#">Green Products</a></li>
<li><a href="#">International</a></li>
</ul><!-- dropdown -->
</li>
<li><a href="#">SDS</a></li>
<li><a href="#">Libraries</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div class="clear"></div>
脚本:
//// phone nav burger
$(document).ready(function(){
$(".burger_nav").on("click", function(){
$("nav ul").toggleClass("open");
});
});
//// phone nav products
$(document).ready(function(){
$(".sub_drop").on("click", function(){
$("nav ul ul").toggleClass("open");
});
});
CSS:
/*********** NAVIGATION (full screen)************/
#phonly{
display:none;
}
#logo_link{
float:left;
padding-top:9px;
padding-top:0.47vw;
width:128px;
width:6.72vw;
margin-left:3.9531%;
margin-right:3.9531%;
}
nav{
float:left;
border-bottom:1px solid #BBB;
z-index:4;
}
nav ul{
list-style-type:none;
text-align:left;
}
nav ul li{
float:left;
position:relative;
width:11.6399%;
font-size:21px;
font-size:1vw;
}
nav ul li:hover ul{
left:0px;
opacity:1;
}
nav ul li a{
display:block;
width:175px;
padding:11px;
padding:0.58vw;
color:#000;
background-color:#fff;
text-decoration:none;
}
nav ul li a:hover{
background-color:#003768;
color:#fff;
}
nav ul li a:active{
color:#F00;
}
nav ul ul{
background-color:#999;
opacity:0;
position:absolute;
left:-9999px;
z-index:20;
}
nav ul ul li{
float:none;
color:#000;
}
nav ul ul li a:active{
background-color:#000;
color:#F00;
}
nav ul ul li a:visited{
color:#003768;
}
nav ul ul li a:hover{
background-color:#003768;
color:#fff;
}
/************* MOBILE *********/
@media screen and (max-width:450px){
#logo_link{
display:none;
}
#phonly{
display:block;
}
.burger_nav{
display:block;
height:40px;
width:100%;
background:url(../images/burger.png) no-repeat 3% center;
background-color:#404040;
cursor:pointer;
}
nav{
background-color:#fff;
width:100%;
}
nav ul{
list-style-type:none;
text-align:left;
overflow:hidden;
height:0;
}
nav ul.open{
height:auto;
}
nav ul li{
float:none;
width:100%;
font-size:21px;
}
nav ul li:hover ul{
left:0px;
opacity:1;
}
nav ul li a{
display:block;
width:100%;
padding:11px;
color:#000;
background-color:#fff;
text-decoration:none;
border-bottom: 1px solid #444;
}
nav ul ul.open{
height:auto
}
nav ul ul{
list-style-type:none;
text-align:left;
overflow:hidden;
height:0;
}
nav ul ul li{
float:none;
color:#000;
}
.sub_drop{
cursor:pointer;
}
nav ul ul li a{
white-space:nowrap;
width:100vw;
background-color:#fff;
color:#000;
font-size:16px;
}
nav ul ul li a:visited{
color:#003768;
}
nav ul ul li a:hover{
background-color:#003768;
color:#fff;
}
}
任何帮助,将不胜感激。我在样式表中写错了吗?脚本不正确吗?不是我的HTML吗?感谢您的时间。
最佳答案
好的,我在这里尝试过您的代码:http://jsbin.com/zabimicati/edit?css,outputoverflow:hidden;
中nav ul
中@media screen and (max-width: 450px)
中的问题。
最简单的修复方法-删除它。但是问题是您希望它如何工作。
例如。您可以在overflow: hidden;
之后添加overflow-y: visible;
关于javascript - 我的导航栏中有一个嵌套的ul,为什么它不显示移动列表中的所有内容?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45486525/