jQuery手风琴菜单插件 HoverAccordion

 查看演示  website  立即下载

这个jQuery插件叫做“HoverAccordion” - 用户不必点击打开一个项目，他们只是将鼠标移动到它。

它也可能作为一个普通手风琴在页面中显示不同类型的内容。 

要求列表的代码尽可能少的自定义，以使插件工作，这对我很重要，即我不用去手动添加类等，以有源元件，如列表的结构已包含所需的所有信息。

使用方法

引用

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.hoveraccordion.min.js"></script>

jQuery中

<script type="text/javascript">
        $(document).ready(function () {
            // Setup HoverAccordion for Example 1
            $('#example1').hoverAccordion();
        });
</script>

html

<ul id="example1">
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Item 2</a>
            <ul>
                <li><a href="http://www.jq22.com">Subitem 2a</a></li>
                <li><a href="index.php?id=2e#ex1">Subitem 2b</a></li>
                <li><a href="index.php?id=2e#ex1">Subitem 2c</a></li>
                <li><a href="index.php?id=2e#ex1">Subitem 2d</a></li>
                <li><a href="index.php?id=2e#ex1">Subitem 2e</a></li>
            </ul>
        </li>
        <li><a href="#">Item 3</a></li>
        <li><a href="#">Item 4</a></li>
        <li><a href="#">Item 5</a>
            <ul>
                <li><a href="index.php?id=5a#ex1">Subitem 5a</a></li>
                <li><a href="index.php?id=5b#ex1">Subitem 5b</a></li>
                <li><a href="index.php?id=5c#ex1">Subitem 5c</a></li>
            </ul>
        </li>
        <li><a href="#">Item 6</a></li>
</ul>

PREVIOUS:
NEXT:
jQuery表单验证插件 jQuery.validity
jQuery多级菜单插件