bootstrap手风琴效果

最新推荐文章于 2025-05-28 20:37:36 发布

原创最新推荐文章于 2025-05-28 20:37:36 发布 · 115 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文详细介绍了如何使用jQuery和CSS创建一个动态的手风琴菜单，包括菜单的折叠和展开功能，以及如何通过JavaScript控制菜单项的显示和隐藏，提供了一个完整的示例代码。

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