The code below works fine, in expanding and compressing the "accordian". I'm having trouble with setting the initial state, and starting off with the accordian compressed.
I tried CSS of display:none on the embedded li's, but then it doesn't expand.
$(document).ready(function(){ var hi_config = { sensitivity: 3, interval: 300, over: hi_mouseover, timeout: 300, out: hi_mouseout }; $("#accordion > li").hoverIntent( hi_config ); }); function hi_mouseover( ) { var $this = $(this); $('ul', this).stop(true, true).slideDown('medium'); } function hi_mouseout( ) { var $this = $(this); $('ul', this).stop(true, true).slideUp('medium'); } <ul id="accordion"> <li><a href="...">Branch 1</a> <ul> <li><a href="...">leaf 1</a></li> <li><a href="...">leaf 2</a></li> </ul> &l开发者_StackOverflow中文版t;/li> <li><a href="...">Branch 2</a> <ul> <li><a href="...">leaf 3</a></li> <li><a href="...">leaf 4</a></li> </ul> </li> </ul>
EDIT Oops, what I said below was assuming you were using JQueryUI's accordion widget. I must have misread your question. For what you're doing, I would suggest using the JQueryUI accordion. But if you want to continue your way, I would suggest adding
$("#accordian > li").each().slideUp('medium');
to your $(document).ready function.
Old Answer
set
collapsible:true,
and call:
$('#accordion').accordion( "activate" , false )
Josiah is right, thank you. I had to change the syntax a bit to make it work in my case.
$("#accordion ul").each(function(){ $(this).slideUp('medium'); });
精彩评论