jQuery多级目录手风琴菜单

当前位置:主页 > jQuery库 > 手风琴 > jQuery多级目录手风琴菜单
jQuery多级目录手风琴菜单
分享:

    插件介绍

    这是一款类似于目录菜单的jQuery多级目录手风琴菜单。该jQUery手风琴菜单每个目录下都可以带有多级的子目录,点击后可以展开。

    浏览器兼容性

    浏览器兼容性
    时间:2014-11-17
    阅读:

简要教程

这是一款类似于多级目录菜单的JQuery手风琴菜单插件。这款jQuery手风琴菜单插件能够帮助用户获取有用的信息而将不需要的信息隐藏。

HTML

<ul class="topnav">
    <li><a href="#" target="scriptbreaker">Home</a></li>
    <li><a href="#">JavaScript<span>[+]</span></a>
        <ul>
             <li><a href="#">Cookies</a></li>
             <li><a href="#">Events</a></li>
             <li><a href="#">Forms</a></li>
             <li><a href="#">Games</a></li>
             <li><a href="#">Images</a></li>
             <li><a href="#">Navigations<span>[+]</span></a>
                <ul>
                    <li><a href="#">CSS</a></li>
                    <li><a href="#">JavaScript</a></li>
                    <li><a href="#">JQuery</a></li>
                </ul>
            </li>
             <li><a href="#">Tabs</a></li>
        </ul>
    </li>
    <li><a href="#">Tutorials<span>[-]</span></a>
        <ul style="display: block;">
             <li class="active"><a href="#">HTML</a></li>
             <li><a href="#">CSS</a></li>
             <li><a href="#">JavaScript</a></li>
             <li><a href="#">Java<span>[+]</span></a>
                <ul>
                    <li><a href="#">JSP</a></li>
                    <li><a href="#">JSF</a></li>
                    <li><a href="#">JPA</a></li>
                </ul>
            </li>
             <li><a href="#">Tabs</a></li>
        </ul>
    </li>
    <li><a href="#" target="_blank">Contact</a></li>
    <li><a href="#">Upload script</a></li>
</ul>                
                

调用插件

首先引入必要的文件。

<script type="text/javascript" src="jquery-1.5.2.min.js">
<script type="text/javascript" src="scriptbreaker-multiple-accordion-1.js">
                

使用下面语句调用它。

<script language="JavaScript">
$(document).ready(function() {
//use the scriptbreaker.com multiple accordion menu
    $(".topnav").accordion({
        accordion:true,
        speed: 500,
        closedSign: '[+]',
        openedSign: '[-]'
    });
});
</script>
                

可用参数

函数:Accordion({options})

  • accordion Boolean:If you set this value to "true" the menu behaves itself as an accordion menu. The irrelevant menu items are closed while the relevant slides open. The accordion feature can be disabled when the "accordion" parameter is set to false. Then the menu behaves like a simple jquery vertical drop down menu
  • speed Integer:The toggle speed to open or close a menu item.
  • closeSign text or html:Text placed inside a span element to indicate a closed menu with child levels.
  • openSign text or html:Text placed inside a span element to indicate a opened menu with child levels

更多信息请参考:http://www.scriptbreaker.com/javascript/script/JQuery-multi-level-accordion-menu