树导航 - 默认打开一个列表项

Question

我有一个树导航，并希望默认情况下打开第一个项目。我可以默认将它们全部打开，但不仅仅是一个。推出“扩大”＆＃39;我要打开的列表项上的类不起作用。在这个例子中我想要＆＃34; Large Cap＆＃34;默认情况下切换。我还尝试通过dom和其他脚本触发单击。我的JS不是很好，我只是在猜测......感谢任何帮助。

HTML

<div id="listContainer">

        <ul id="expList">
            <li> 
                Large Cap
                <ul>
                    <li><a href="#">High Dividend Yield <span> VHDYX</span></a></li>
                    <li><a href="#">High Dividend Yield <span> VHDYX</span></a></li>
                    <li><a href="#">Dividend Appreciation <span> VHDYX</span></a></li>
                    <li><a href="#">Dividend Growth <span> VHDYX</span></a></li>
                    <li><a href="#">Equity Income<span> VHDYX</span></a></li>
                    <li><a href="#">REIT <span> VHDYX</span></a></li>
                    <li><a href="#">Ultra-Short-Term Bond<span> VHDYX</span></a></li>
                    <li><a href="#">Short-Term Corporate Bond <span> VHDYX</span></a></li>
                    <li><a href="#">Intermediate-Term Corporate Bond <span> VHDYX</span></a></li>
                    <li><a href="#">Long-Term Corporate Bond <span> VHDYX</span></a></li>
                    <li><a href="#">Long-Term Corporate Bond 2 <span> VHDYX</span></a></li>
                </ul>
            </li>             
             <li>
                Mid Cap
                <ul>
                    <li><a href="#">High Dividend Yield <span> VHDYX</span></a></li>
                    <li><a href="#">High Dividend Yield <span> VHDYX</span></a></li>
                    <li><a href="#">Dividend Appreciation <span> VHDYX</span></a></li>
                    <li><a href="#">Dividend Growth <span> VHDYX</span></a></li>
                    <li><a href="#">Equity Income<span> VHDYX</span></a></li>
                    <li><a href="#">REIT <span> VHDYX</span></a></li>
                    <li><a href="#">Ultra-Short-Term Bond<span> VHDYX</span></a></li>                                             
                </ul>
            </li>                
             <li>
                Small Cap
                <ul>
                  <li><a href="#">REIT <span> VHDYX</span></a></li>
                    <li><a href="#">Ultra-Short-Term Bond<span> VHDYX</span></a></li>
                    <li><a href="#">Short-Term Corporate Bond <span> VHDYX</span></a></li>
                    <li><a href="#">Intermediate-Term Corporate Bond <span> VHDYX</span></a></li>
                    <li><a href="#">Long-Term Corporate Bond <span> VHDYX</span></a></li>
                    <li><a href="#">Long-Term Corporate Bond 2 <span> VHDYX</span></a></li>       
                </ul>
            </li>            
        </ul>


    </div>

JS

function prepareList() {
$('#expList').find('li:has(ul)')
.click( function(event) {
    if (this == event.target) {
        $(this).toggleClass('expanded');
        $(this).children('ul').toggle('medium');


    }
    return false;
})
.addClass('collapsed')
.children('ul').hide();

CSS

#listContainer{
margin-top: 0px;
}

#expList ul, li {
list-style: none;
margin:0;
padding:0;
cursor: pointer;
}
#expList p {
margin:0;
display:block;
}
#expList p:hover {
background-color:#121212;
}
#expList li {
line-height:140%;
text-indent:0px;
background-position: 1px 8px;
padding-left: 20px;
background-repeat: no-repeat;
}


/* Collapsed state for list element */
#expList .collapsed {
background-image: url(../img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
background-image: url(../img/expanded.png);
}
#expList {
clear: both; 
}