<script type="text/javascript" src="jqueryjs.js"></script>
<script type="text/javascript" src="jqueryuiaccor.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#accordion').accordion();
});
</script>
<div id="container">
<div id="content">
<div id="sidebar">
<ul id="accordion">
<li>
<a href="#recent" class="heading">Unit 1</a>
<ul id="accordion">
<li> <a href="#recent" class="heading">Chapter 1 </a> </li>
<ul id="accordion2">
<li> Lesson 1 </li>
</ul>
</ul>
</li>
<li>
<a href="#recent" class="heading">Unit 2</a>
<ul id="accordion">
<li> <a href="#recent" class="heading">Chapter 1 </a> </li>
<ul id="accordion">
<li> <a href="#recent" class="heading" role="tab" aria-expanded="true">Chapter 2 </a>
<ul id="accordion">
<li> <a href="#recent" class="heading">Lesson 1 </a></li>
</ul>
</li>
</ul>
</ul>
</li>
</ul>
</div>
</div>
</div>
我的acorjs.js文件:
$(document).ready(function() {
$('ul#accordion a.heading').click(function() {
$(this).css('outline','none');
if($(this).parent().hasClass('current')) {
$(this).siblings('ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
$.scrollTo('#accordion',1000);
});
} else {
$('ul#accordion li.current ul').slideUp('slow',function() {
$(this).parent().removeClass('current');
});
$(this).siblings('ul').slideToggle('slow',function() {
$(this).parent().toggleClass('current');
});
$.scrollTo('#accordion',1000);
}
return false;
});
});