Question

所以我有一个下拉菜单，每个菜单都有一个<li>和<ul>但是，当一个类别自动打开时，它没有正确显示。下面的图片将更好地解释这一点。

图片：

enter image description here

HTML代码;

<!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>

这是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;
            }

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

Answer 1

我相信你在jsfiddle

中跨越10-14之前在li上错过了class =“open”

是吗？

Answer 2

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>

改为粘贴你错过了班级=＆＃34;打开＆＃34; 你的代码是

            <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>

我在li中提供了全部内容，以使其更简单

下拉菜单在页面加载时没有正确显示？ JavaScript的

2 个答案: