Javascript 树导航-默认情况下打开一个列表项

我有一个树导航，希望在默认情况下打开第一个项目。我可以让它们在默认情况下全部打开，但不只是一个。将“扩展”类放在我要打开的列表项上是不起作用的。在本例中，我希望默认情况下切换“大盘”。我还尝试通过dom和其他脚本触发单击。我的JS不是很好，我只是猜测..谢谢你的帮助

HTML

CSS

---

请你也发布相关的css。发布的css，谢谢你的关注。你的css并没有隐藏/显示任何内容。您可以尝试使用jquery ui的手风琴：

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

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();

#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; 
}