对于我的主导航,我有一个嵌套的ul,它在单击“产品”时仅显示前6 li。当用户单击“产品”时如何显示它们?是CSS问题还是脚本问题?这是屏幕截图。

javascript - 我的导航栏中有一个嵌套的ul,为什么它不显示移动列表中的所有内容?-LMLPHP

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,output
overflow:hidden;nav ul@media screen and (max-width: 450px)中的问题。
最简单的修复方法-删除它。但是问题是您希望它如何工作。
例如。您可以在overflow: hidden;之后添加overflow-y: visible;

关于javascript - 我的导航栏中有一个嵌套的ul,为什么它不显示移动列表中的所有内容?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/45486525/

10-13 02:24
查看更多