本文例項製作了一個用外掛形式實現的手風琴二級選單，供大家參考，具體內容如下

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/">
    $("#accordion").accordion();
</script>

匯入accordion-.css檔案與accordion-jQuery.檔案

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:http://www.cppcns.com
 
 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.childrhttp://www.cppcns.com
 
en().addClass("list1");
    $accordion.children().children("div").addClass("list2");
    $accordion.on("click",".list1>p",function(){
        if($(this).next(".list2").is(":visible")){
            $(twww.cppcns.comhishttp://www.cppcns.com).next(".list2").slideUp();
        }else{
            $(this).next(".list2").slideDown();
            $(this).parent().siblings(".list1").children(".list2").slideUp();
        }
    });
}

實現效果：

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。