Question

对于我的主导航，我有一个嵌套的ul，只显示单击Products时的前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吗？谢谢你的时间。

Answer 1

好的，我在这里尝试了您的代码：http://jsbin.com/zabimicati/edit?css,output 问题overflow:hidden; nav ul @media screen and (max-width: 450px)中的问题。最简单的修复方法 - 删除它。但问题是你期望它如何发挥作用。例如。您可以在overflow: hidden;之后添加overflow-y: visible;

我的导航中有一个嵌套的ul，为什么它没有显示移动列表中的所有内容？

1 个答案: