使用jQuery Accordion制作垂直手风琴折叠菜单效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

文章内容

‌‌jQuery Accordion插件‌用于创建折叠菜单，它通常与嵌套的列表、定义列表或嵌套的div一起使用。这个插件现在已经是jQuery UI的一部分，独立的版本不会再更新。jQuery Accordion插件允许用户通过点击标题来展开或收起面板，实现内容的动态展示。它自动管理状态，确保一次只展示一个面板的内容，同时提供丰富的配置选项，如动画效果、折叠事件、禁用折叠等，以满足不同场景的需求。此外，该插件易于集成到现有的web项目中，与jQuery库和jQuery UI库兼容，使得它成为一个功能强大且灵活的工具，适用于需要创建可折叠菜单或面板组的Web应用。

html代码

<!DOCTYPE html >
<html>
<head>
    <link href="css/jquery-accordion-menu.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="jqfree">
        <div id="jquery-accordion-menu" class="jquery-accordion-menu red">
            <ul id="demo-list">
                <li><a href="#;">新品上市 </a>
                    <ul class="submenu">
                        <li><a href="#">零食新品</a></li>
                        <li><a href="#">啵乐乐</a></li>
                        <li><a href="#">泰宝果汁</a></li>
                        <li><a href="#">果汁饮料系列</a></li>
                    </ul>
                </li>
                <li><a href="#;">海苔系列 </a>
                    <ul class="submenu">
                        <li><a href="#">九日海苔</a></li>
                        <li><a href="#">欧巴熊卡通海苔</a></li>
                    </ul>
                </li>
                <li><a href="#;">膨化零食 </a>
                    <ul class="submenu">
                        <li><a href="#">味祖年糕条</a></li>
                        <li><a href="#">辣祖系列</a></li>
                        <li><a href="#">九日土豆条</a></li>
                        <li><a href="#">好丽友太阳片</a></li>
                    </ul>
                </li>
            </ul>
            <div class="jquery-accordion-menu-footer">
            </div>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
    <script src="js/jquery-accordion-menu.js" type="text/javascript"></script>
    <script> 
        jQuery(document).ready(function () {
            jQuery("#jquery-accordion-menu").jqueryAccordionMenu();

        }); 
    </script>
</body>
</html>