jQuery插件實現(xiàn)手風(fēng)琴二級菜單
更新時間：2021年10月12日 10:46:40 作者：javscp_q
這篇文章主要為大家詳細(xì)介紹了jQuery插件實現(xiàn)手風(fēng)琴二級菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例制作了一個用jQuery插件形式實現(xiàn)的手風(fēng)琴二級菜單，供大家參考，具體內(nèi)容如下
HTML5結(jié)構(gòu)要求：
<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找到父標(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();
}
});
}
實現(xiàn)效果：
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- jQuery Easyui使用(一)之可折疊面板的布局手風(fēng)琴菜單
- jQuery制作效果超棒的手風(fēng)琴折疊菜單
- 基于Jquery代碼實現(xiàn)手風(fēng)琴菜單
- jQuery多級手風(fēng)琴菜單實例講解
- 基于jQuery實現(xiàn)以手風(fēng)琴方式展開和折疊導(dǎo)航菜單
- 基于JQuery的一句話搞定手風(fēng)琴菜單
- jquery實現(xiàn)簡單手風(fēng)琴菜單效果實例
- jquery實現(xiàn)下拉菜單的手風(fēng)琴效果
- 基于jQuery實現(xiàn)手風(fēng)琴菜單、層級菜單、置頂菜單、無縫滾動效果
- Jquery 垂直多級手風(fēng)琴菜單附源碼下載
相關(guān)文章
這篇文章主要介紹了jQuery實現(xiàn)的背景顏色漸變動畫效果,涉及事件響應(yīng)及頁面元素屬性結(jié)合時間動態(tài)變換的相關(guān)操作技巧,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了jQuery設(shè)置內(nèi)容和屬性，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
很多人可能都會遇到在調(diào)試的時候用了return了false，可為什么還會提交呢？這個問題我最近也碰到了，嘗試了多次也沒有用，后來終于發(fā)現(xiàn)了其中的問題，下面分享處理給大家，讓同樣遇到這個問題的朋友們能夠看看，有需要的朋友們下面來一起看看吧。2016-10-10
本文是對jquery 刪除cookie失效的解決方法進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
在某些特殊的情況下是需要動態(tài)生成表格的，下面為大家詳細(xì)介紹下使用jquery是如何做到的，感興趣的朋友不要錯過2013-12-12
本文主要介紹了JQuery的基本知識，如：jquery內(nèi)置函數(shù)，JQuery對象，Dom對象，jquery選擇器，jquery的迭代，jquery的節(jié)點遍歷等等，有助于對JQuery基本知識的學(xué)習(xí)與鞏固。需要的朋友可以參考下2016-12-12
這篇文章向大家推薦20款效果非常棒的 jQuery 插件。jQuery 是一個非常優(yōu)秀的JavaScript庫，它簡化了 HTML 文檔遍歷，事件處理，動畫以及 Ajax 交互，同時也改變了很多人編寫 JavaScript 代碼的方式2011-11-11
這篇文章主要為大家介紹了jQuery編程動畫基本實現(xiàn)方法示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要 介紹了jQuery利用jquery.qrcode.min.js插件實現(xiàn)二維碼掃描功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
jq實現(xiàn)酷炫的鼠標(biāo)經(jīng)過圖片翻滾效果
一個酷炫的圖片翻滾效果要實現(xiàn)這個效果并不難，只要思路對了，一切都好辦，下面有個不錯的示例，大家可以參考下2014-03-03