keeping first menu item expanded in jquery

问题

I have 3 menu Items designed in HTML. I want my first Menu item to be expanded by default.

Here is my Fiddle: FIDDLE

Posting whatever I have with me :

HTML

<div id="example1">
    <ul id="menu1" class="example_menu">
        <li><a class="expanded" href="#">Program 111</a>

            <ul>
                <li><a href="#">258275h</a>
                </li>
                <li><a href="#">264007</a>
                </li>
                <li><a href="#">270650b</a>
                </li>
            </ul>
        </li>
        <li><a class="collapsed" href="#">Program 112</a>

            <ul>
                <li><a class="collapsed" href="#">25875d</a>
                </li>
                <ul>
                    <li><a href="#">Release 1- Early Upgrade - 1404</a>
                    </li>
                    <li><a href="#">Release 2 - MDPP Umbrella Insurance</a>
                    </li>
                </ul>
                <li><a class="collapsed" href="#">269162a</a>

                    <ul>
                        <li><a href="#">Release 1- Early Upgrade - 1404</a>
                        </li>
                        <li><a href="#">Release 2 - MDPP Umbrella Insurance</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a class="collapsed" href="#">Program 113</a>

            <div>Hello</div>
            <ul>
                <li><a href="#">245875f</a>
                </li>
                <li><a href="#">2587940</a>
                </li>
                <li><a href="#">201254d</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

JQuery

$(document).ready(function () {
    $('#menu1  li a').click(function () {
        $(this).parent().children('ul').slideToggle('medium').toggleClass('collapsed').toggleClass('expanded');
        //$(this).parent('ul').slideToggle('medium').toggleClass('collapsed').toggleClass('expanded');
        $(this).parent().children('div').slideToggle('medium').toggleClass('collapsed').toggleClass('expanded');
    });
});

Style

body {
    font: 10pt Arial, Helvetica, Sans-serif;
    background-image: url();
    margin: 0px;
}

a {
    text-decoration: none;
}

#example1, #example2, #example3, #example4, #example5 {
    float: left;
}

.expand_all, .collapse_all {
    cursor: pointer;
}

.example_menu {
    font-size: 95%;
    list-style: none;
    margin: 0;
    padding: 0;
    vertical-align: top;
    width: 100%;
}

.example_menu ul {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
}

#menu1, #menu2, #menu3, #menu4, #menu5 {
    margin: 0;
    color: #96C;
}

#menu1 li, #menu2 li, #menu3 li, #menu4 li, #menu5 li, .example_menu li {
    background-image: none;
    margin: 0;
    padding: 0;
}

.example_menu ul ul {
    display: block;
}

.example_menu ul ul li a {
    padding-left: 20px;
    width: 99%;
}

.example_menu li.header3 a {
    padding-left: 34px;
    width: 98%;
}

.example_menu a {
    color: #000;
    cursor: pointer;
    display: block;
    font-weight: bold;
    margin-left: 0;
    width: 99%;
    padding-top: 18px;
    padding-right: 0px;
    padding-bottom: 12px;
    padding-left: 19px;
}

.example_menu a.expanded {
    background: #bbb url('images/collapse.gif') no-repeat 3px 61%;
}

.example_menu a.collapsed {
    border-top: 1px solid #E3E3E3;
    background-color: #bbb;
    background-image: url(images/expand.gif);
    background-repeat: no-repeat;
    background-position: 3px 61%;
}

a.collapsed + ul {
    display: none;
}

.example_menu a.normal {
    background: none repeat scroll 0 0 #BBBBBB;
}

.example_menu a:hover {
    text-decoration: none;
}

.example_menu ul a {
    background: #e8e8e8;
    border-top: 2px solid #fff;
    color: #000;
    display: block;
    font-weight: normal;
    padding: 3px 8px 2px 17px;
    width: 98%;
}

.example_menu ul a:link {
    font-weight: bolder;
}

.example_menu ul a:hover {
    background: #f5f5f5;
    text-decoration: underline;
}

.example_menu li.active a {
    background: #fff;
}

.example_menu li.active li a {
    background: #e8e8e8;
}

#menu1 li.footer, #menu2 li.footer, #menu3 li.footer, #menu4 li.footer, #menu5 li.footer, .example_menu .footer {
    background: transparent url('images/footer.jpg') no-repeat 0 0;
    border-top: 2px solid #fff;
    height: 9px;
    line-height: 15px;
    margin: 0 0 10px 0;
    width: 95%;
}

.example_menu .footer span {
    display: none;
}

Everything is working as expected, But I want the first menu item to be expanded by default. Please be gentle, I am new to JQuery.

回答1:

Demo Fiddle

You can simply add the CSS:

.example_menu li:first-of-type ul{
    display:block;
}

来源：https://stackoverflow.com/questions/23537261/keeping-first-menu-item-expanded-in-jquery