jQuery插件实现手风琴二级菜单

本文实例制作了一个用jQuery插件形式实现的手风琴二级菜单，供大家参考，具体内容如下

HTML5结构要求：

<div id="accordion">
    <div>
        <p>一级菜单</p>
        <div>
            <p>二级菜单</p>
            <p>二级菜单</p>
            <p>二级菜单</p>
        </div>
    </div>
    <div>
        <p>一级菜单</p>
        <div>
            <p>二级菜单</p>
            <p>二级菜单</p>
            <p>二级菜单</p>
        </div>
    </div>
    <div>
        <p>一级菜单</p>
        <div>
            <p>二级菜单</p>
            <p>二级菜单</p>
            <p>二级菜单</p>
        </div>
    </div>
</div>

在body末尾使用jQuery找到父标签并调用插件函数

<script type="text/javascript">
    $("#accordion").accordion();
</script>

导入accordion-css.css文件与accordion-jQuery.js文件

accordion-css.css：

*{padding: 0;margin: 0;}
#accordion{
    width: 200px;
    margin: 0 auto;
    border: 1px solid whitesmoke;
}
#accordion .list1>p{
    padding: 10px 15px;
    font: 20px "微软雅黑";
    font-weight: bold;
    background: whitesmoke;
    cursor: pointer;
}
#accordion .list1>p:hover{
    background: lightskyblue;
}
#accordion .list2>p{
    padding: 10px 25px;
    font: 15px "微软雅黑";
    cursor: pointer;
}
#accordion .list2>p:hover{
    background: lightskyblue;
}
#accordion .list2{
    display: none;
}

accordion-jQuery.js：

jQuery.fn.accordion = function(){
    var $accordion = $(this);
    $accordion.children().addClass("list1");
    $accordion.children().children("div").addClass("list2");
    $accordion.on("click",".list1>p",function(){
        if($(this).next(".list2").is(":visible")){
            $(this).next(".list2").slideUp();
        }else{
            $(this).next(".list2").slideDown();
            $(this).parent().siblings(".list1").children(".list2").slideUp();
        }
    });
}

实现效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。

您可能感兴趣的文章:

• jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单
• jQuery制作效果超棒的手风琴折叠菜单
• 基于Jquery代码实现手风琴菜单
• jQuery多级手风琴菜单实例讲解
• 基于jQuery实现以手风琴方式展开和折叠导航菜单
• 基于JQuery的一句话搞定手风琴菜单
• jquery实现简单手风琴菜单效果实例
• jquery实现下拉菜单的手风琴效果
• 基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
• Jquery 垂直多级手风琴菜单附源码下载

本文由 华域联盟 原创撰写：华域联盟 » jQuery插件实现手风琴二级菜单

转载请保留出处和原文链接：https://www.cnhackhy.com/83156.htm