<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找到父標簽并調(diào)用插件函數(shù)

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

導(dǎo)入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();
        }
    });
}

實現(xiàn)效果：