jQuery插件實(shí)現(xiàn)手風(fēng)琴二級(jí)菜單

更新時(shí)間：2021年10月12日 10:46:40 作者：javscp_q

這篇文章主要為大家詳細(xì)介紹了jQuery插件實(shí)現(xiàn)手風(fēng)琴二級(jí)菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例制作了一個(gè)用jQuery插件形式實(shí)現(xiàn)的手風(fēng)琴二級(jí)菜單，供大家參考，具體內(nèi)容如下

HTML5結(jié)構(gòu)要求：

<div id="accordion">
    <div>
        <p>一級(jí)菜單</p>
        <div>
            <p>二級(jí)菜單</p>
            <p>二級(jí)菜單</p>
            <p>二級(jí)菜單</p>
        </div>
    </div>
    <div>
        <p>一級(jí)菜單</p>
        <div>
            <p>二級(jí)菜單</p>
            <p>二級(jí)菜單</p>
            <p>二級(jí)菜單</p>
        </div>
    </div>
    <div>
        <p>一級(jí)菜單</p>
        <div>
            <p>二級(jí)菜單</p>
            <p>二級(jí)菜單</p>
            <p>二級(jí)菜單</p>
        </div>
    </div>
</div>

在body末尾使用jQuery找到父標(biāo)簽并調(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();
        }
    });
}

實(shí)現(xiàn)效果：

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

jQuery實(shí)現(xiàn)的背景顏色漸變動(dòng)畫效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的背景顏色漸變動(dòng)畫效果,涉及事件響應(yīng)及頁(yè)面元素屬性結(jié)合時(shí)間動(dòng)態(tài)變換的相關(guān)操作技巧,需要的朋友可以參考下
2017-03-03
詳解jQuery設(shè)置內(nèi)容和屬性
這篇文章主要介紹了jQuery設(shè)置內(nèi)容和屬性，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Jquery表單驗(yàn)證失敗后不提交的解決方法
很多人可能都會(huì)遇到在調(diào)試的時(shí)候用了return了false，可為什么還會(huì)提交呢？這個(gè)問(wèn)題我最近也碰到了，嘗試了多次也沒(méi)有用，后來(lái)終于發(fā)現(xiàn)了其中的問(wèn)題，下面分享處理給大家，讓同樣遇到這個(gè)問(wèn)題的朋友們能夠看看，有需要的朋友們下面來(lái)一起看看吧。
2016-10-10
jquery 刪除cookie失效的解決方法
本文是對(duì)jquery 刪除cookie失效的解決方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-11-11
Jquery 動(dòng)態(tài)生成表格示例代碼
在某些特殊的情況下是需要?jiǎng)討B(tài)生成表格的，下面為大家詳細(xì)介紹下使用jquery是如何做到的，感興趣的朋友不要錯(cuò)過(guò)
2013-12-12
JQuery學(xué)習(xí)總結(jié)【一】
本文主要介紹了JQuery的基本知識(shí)，如：jquery內(nèi)置函數(shù)，JQuery對(duì)象，Dom對(duì)象，jquery選擇器，jquery的迭代，jquery的節(jié)點(diǎn)遍歷等等，有助于對(duì)JQuery基本知識(shí)的學(xué)習(xí)與鞏固。需要的朋友可以參考下
2016-12-12
20款效果非常棒的 jQuery 插件小結(jié)分享
這篇文章向大家推薦20款效果非常棒的 jQuery 插件。jQuery 是一個(gè)非常優(yōu)秀的JavaScript庫(kù)，它簡(jiǎn)化了 HTML 文檔遍歷，事件處理，動(dòng)畫以及 Ajax 交互，同時(shí)也改變了很多人編寫 JavaScript 代碼的方式
2011-11-11
jQuery常見(jiàn)動(dòng)畫效果實(shí)現(xiàn)介紹
這篇文章主要為大家介紹了jQuery編程動(dòng)畫基本實(shí)現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-10-10
jQuery實(shí)現(xiàn)二維碼掃描功能
這篇文章主要介紹了jQuery利用jquery.qrcode.min.js插件實(shí)現(xiàn)二維碼掃描功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
jq實(shí)現(xiàn)酷炫的鼠標(biāo)經(jīng)過(guò)圖片翻滾效果
一個(gè)酷炫的圖片翻滾效果要實(shí)現(xiàn)這個(gè)效果并不難，只要思路對(duì)了，一切都好辦，下面有個(gè)不錯(cuò)的示例，大家可以參考下
2014-03-03