bootstrap手风琴效果

<div class="container">
<div class="row">
<ul>
<li class="nav-parent">
<a href="javacsript:void(0)"><span>1</span></a>
<ul class="children">
<li><a href="javacsript:void(0)">1.1</a></li>
<li><a href="javacsript:void(0)">1.2</a></li>
<li><a href="javacsript:void(0)">1.3</a></li>
</ul>
</li>
<li class="nav-parent">
<a href="javacsript:void(0)"><span>2</span></a>
<ul class="children">
<li><a href="javacsript:void(0)">2.1</a></li>
<li><a href="javacsript:void(0)">2.2</a></li>
<li><a href="javacsript:void(0)">2.3</a></li>
</ul>
</li>
<li class="nav-parent">
<a href="javacsript:void(0)"><span>3</span></a>
<ul class="children">
<li><a href="javacsript:void(0)">3.1</a></li>
<li><a href="javacsript:void(0)">3.2</a></li>
<li><a href="javacsript:void(0)">3.3</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function () {
var $container = $('.children'),
$trigger = $('.nav-parent'); // 分别获取所有的“父子”
$container.hide();// 隐藏所有的“子”
$trigger.first().find('.children').show();// 显示第一个“父”的子（展开第一个） 
$trigger.on('click', function (e) {// 当“父”发生点击事件
if ($(this).find('.children').is(':hidden')) {
$trigger.find('.children').hide(300);// 关闭其他
$(this).find('.children').show(300);// 显示自己
}
e.preventDefault();
});
});
</script>
</div>