下拉菜单在页面加载时无法正常显示? JavaScript的

时间:2022-11-20 09:47:00

So I have a drop down menu, each with a <li> and <ul> however, when one category open up automatically, it doesn't show correctly. The images below will explain this better.

所以我有一个下拉菜单,每个菜单都有一个

    • 但是,当一个类别自动打开时,它没有正确显示。下面的图片将更好地解释这一点。

  • Images:

    下拉菜单在页面加载时无法正常显示? JavaScript的下拉菜单在页面加载时无法正常显示? JavaScript的

    HTML Code;

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Accordion Menu</title>
    
        <link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" charset="utf-8" />
    
        <style>
            /* General Styles */
            center > h4 { color: #fff; margin-top: 50px; }
            body { margin: 0; font-family: Arial; background-color: #2c2e38; }
            ul#accordion-freebie { display: table; list-style: none; margin: 0 auto; padding: 0; }
            ul#accordion-freebie > li { float: left; margin-right: 20px; margin-bottom: 20px; padding: 10px 10px; }
            ul#accordion-freebie > li:last-child { margin-right: 0; }
            ul#accordion-freebie > li > span { margin-bottom: 10px; }
        </style>
    
        <script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
    
        <script>
            $(document).ready(function(){
                $("ul.accordion span.name").click(function()
                {
                    var $li = $( this ).parent("li").has("ul");
    
                    if( $li.hasClass("open") )
                    {
                        $li.find("ul").slideUp('fast', function( ){
                            $li.removeClass("open");
                        });
                    }
                    else
                    {
                        $li.addClass("open");
                        $li.find("ul").slideDown('fast');
                    }
                });
            });
        </script>
    </head>
    <body>
        <center><h4>Accordion Menu</h4></center>
        <ul id="accordion-freebie">
            <li>
                <ul class="accordion">
                    <li class="open">
                        <span class="name">Levels 1-4</span>
                        <span class="notifications">40</span>
                                            <ul>
                            <li>
                                <span class="name">Level 1</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 2</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 3</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 4</span>
                                <span class="notifications">10</span>
                            </li>
                        </ul>
                    </li>
                    <!--append class="open" to <li> toautomatically open up a sub on page load.-->
                    <li class="open">
                        <span class="name">Levels 1-4</span>
                        <span class="notifications">40</span>
                                            <ul>
                            <li>
                                <span class="name">Level 1</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 2</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 3</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 4</span>
                                <span class="notifications">10</span>
                            </li>
                        </ul>
                    </li>
                    <li class="open">
                        <span class="name">Levels 1-4</span>
                        <span class="notifications">40</span>
                                            <ul>
                            <li>
                                <span class="name">Level 1</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 2</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 3</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 4</span>
                                <span class="notifications">10</span>
                            </li>
                        </ul>
                    </li>
                    <li class="open">
                        <span class="name">Levels 1-4</span>
                        <span class="notifications">40</span>
                                            <ul>
                            <li>
                                <span class="name">Level 1</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 2</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 3</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 4</span>
                                <span class="notifications">10</span>
                            </li>
                        </ul>
                    </li>
                    <li class="open">
                        <span class="name">Levels 1-4</span>
                        <span class="notifications">40</span>
                                            <ul>
                            <li>
                                <span class="name">Level 1</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 2</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 3</span>
                                <span class="notifications">10</span>
                            </li>
                            <li>
                                <span class="name">Level 4</span>
                                <span class="notifications">10</span>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </body>
    </html>
    

    Here's the CSS Code:

    这是CSS代码:

    * { outline: none !important; }
    a, a:visited, a:hover, a:active { text-decoration: none; color: inherit; }
    
    /*
     * ================= Freebie Styles =================
     */
    
    ul.accordion *
    {
        box-sizing: border-box !important;
        -webkit-box-sizing: border-box !important;
        -moz-box-sizing: border-box !important;
        -ms-box-sizing: border-box !important;
    }
    
    ul.accordion
    {
        list-style: none !important;
        width: 300px;
    }
        ul.accordion li
        {
            position: relative;
        }
    
        ul.accordion > li
        {
            margin-bottom: 2px;
        }
    
        ul.accordion > li:last-child
        {
            margin-bottom: 0;
        }
    
            ul.accordion > li span.name
            {
                background: #1bbc9b url(../images/more.png) no-repeat 6px;
                display: inline-block;
                width: 100%;
                padding: 15px 20px 15px 40px;
                color: #ffffff;
            }
    
                ul.accordion > li span.name:hover
                {
                    background-color: #23c8a6;
                    cursor: pointer;
                }
    
            ul.accordion > li span.notifications
            {
                position: absolute;
                top: 12px;
                right: 10px;
                display: inline-block;
                float: right;
                padding: 3px 0;
                width: 24px;
                height: 24px;
                border: 2px solid #ffffff;
                color: #ffffff;
                font-size: 12px;
                text-align: center;
                -webkit-border-radius: 12px;
                -moz-border-radius: 12px;
                border-radius: 12px;
            }
    
            ul.accordion > li.open span.name
            {
                background: #ececec url(../images/less.png) no-repeat 6px;
                color: #6f6f71;
            }
    
                ul.accordion > li.open span.name:hover
                {
                    background-color: #ebebeb;
                    cursor: pointer;
                }
    
                ul.accordion > li.open span.notifications
                {
                    border-color: #cdcdcd;
                    color: #cdcdcd;
                }
    
                ul.accordion > li.open > ul
                {
                    list-style: none !important;
                    padding: 0;
                    margin: 0;
                    background-color: #ffffff;
                    color: #6f6f71;
                }
    
                ul.accordion > li.open > ul > li
                {
                    border-top: 1px solid #d5d6d8;
                }
    
                    ul.accordion > li.open > ul > li span.name
                    {
                        background: none;
                        padding: 17px 20px 17px 40px;
                        font-size: 12px;
                    }
    
                ul.accordion > li.open > ul > li:hover
                {
                    background-color: #ebebeb;
                }
    

    And here's the JSFiddle: http://jsfiddle.net/rd4PP/

    这里是JSFiddle:http://jsfiddle.net/rd4PP/

    2 个解决方案

    #1


    1  

    i believe you missed class="open" on the li before span 10-14 in the jsfiddle

    我相信你在jsfiddle的10-14之前在li上错过了class =“open”

    is that right?

    是对的吗?

    #2


    0  

    Hey check this out

    嘿,看看这个

      <li class="open"> <span class="name">Levels 10-14</span>
        <span class="notifications">40</span>
    
                            <ul>
                                <li>    <span class="name">Level 10</span>
        <span class="notifications">10</span>
    
                                </li>
                                <li>    <span class="name">Level 11</span>
        <span class="notifications">10</span>
    
                                </li>
                                <li>    <span class="name">Level 12</span>
        <span class="notifications">10</span>
    
                                </li>
                                <li>    <span class="name">Level 13</span>
        <span class="notifications">10</span>
    
                                </li>
                            </ul>
                        </li>
    

    paste this instead you were missing class="open" your code was

    粘贴这个而不是你缺少class =“open”你的代码

                <li>    <span class="name">Levels 10-14</span>
    <span class="notifications">40</span>
    
                        <ul>
                            <li>    <span class="name">Level 10</span>
    <span class="notifications">10</span>
    
                            </li>
                            <li>    <span class="name">Level 11</span>
    <span class="notifications">10</span>
    
                            </li>
                            <li>    <span class="name">Level 12</span>
    <span class="notifications">10</span>
    
                            </li>
                            <li>    <span class="name">Level 13</span>
    <span class="notifications">10</span>
    
                            </li>
                            <li>    <span class="name">Level 14</span>
    <span class="notifications">10</span>
    
                            </li>
                        </ul>
                    </li>
    

    i gave whole content inside the li so as to make it simpler

    我在li里面提供了全部内容,以使其更简单

    #1


    1  

    i believe you missed class="open" on the li before span 10-14 in the jsfiddle

    我相信你在jsfiddle的10-14之前在li上错过了class =“open”

    is that right?

    是对的吗?

    #2


    0  

    Hey check this out

    嘿,看看这个

      <li class="open"> <span class="name">Levels 10-14</span>
        <span class="notifications">40</span>
    
                            <ul>
                                <li>    <span class="name">Level 10</span>
        <span class="notifications">10</span>
    
                                </li>
                                <li>    <span class="name">Level 11</span>
        <span class="notifications">10</span>
    
                                </li>
                                <li>    <span class="name">Level 12</span>
        <span class="notifications">10</span>
    
                                </li>
                                <li>    <span class="name">Level 13</span>
        <span class="notifications">10</span>
    
                                </li>
                            </ul>
                        </li>
    

    paste this instead you were missing class="open" your code was

    粘贴这个而不是你缺少class =“open”你的代码

                <li>    <span class="name">Levels 10-14</span>
    <span class="notifications">40</span>
    
                        <ul>
                            <li>    <span class="name">Level 10</span>
    <span class="notifications">10</span>
    
                            </li>
                            <li>    <span class="name">Level 11</span>
    <span class="notifications">10</span>
    
                            </li>
                            <li>    <span class="name">Level 12</span>
    <span class="notifications">10</span>
    
                            </li>
                            <li>    <span class="name">Level 13</span>
    <span class="notifications">10</span>
    
                            </li>
                            <li>    <span class="name">Level 14</span>
    <span class="notifications">10</span>
    
                            </li>
                        </ul>
                    </li>
    

    i gave whole content inside the li so as to make it simpler

    我在li里面提供了全部内容,以使其更简单