javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼
手風(fēng)琴下拉菜單實(shí)現(xiàn)的效果更靈活,不同與傳統(tǒng)的下拉菜單,本文就為大家分享一段javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼,先看一看效果圖:
具體的javascript手風(fēng)琴下拉菜單代碼:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>手風(fēng)琴下拉菜單效果</title> <script src="js/jquery-1.11.1.js"></script> <style> *{ margin: 0; padding: 0; } ul{ list-style: none; } .nav ul{ display: none; } .nav ul li{ width: 100px; text-align: center; cursor: pointer; } .nav div{ background: #4ecc70; width: 100px; border-radius: 10px; line-height: 34px; text-align: center; color: white; cursor: pointer; } .demo{ /* display: none;*/ } .red{ background:red; border-radius: 10px; } </style> <script> $(function(){ //case 1 // $('.nav div').on('click',function(){ // if(false==$(this).next().is(':visible')){ // $('.nav ul').slideUp(300); // } // $(this).next().slideToggle(300); // }) //case 2 var changeType=$('.nav').find('div'); $.each(changeType,function(){ $(this).on('click',function(){ if(false==$(this).next().is(':visible')){ $('.nav ul').slideUp(300); } $(this).next().slideToggle(300); }) $('.nav ul:eq(0)').show(); }) var hoverType=$('.nav .u').find('li') $.each(hoverType,function(){ $(this).hover(function(){ $(this).addClass('red').siblings().removeClass('red'); }) }) }) </script> </head> <body> <ul class="nav"> <li> <div>水果</div> <ul class="u"> <li>香蕉</li> <li>橘子</li> <li>梨子</li> <li>西瓜</li> </ul> </li> <li> <div>蔬菜</div> <ul class="u"> <li>芹菜</li> <li>黃瓜</li> <li>洋蔥</li> <li>西瓜</li> </ul> </li> <li> <div>肉類</div> <ul class="u"> <li>雞肉</li> <li>兔肉</li> <li>鴨肉</li> <li>龍肉</li> </ul> </li> </ul> </body> </html>
以上就是為大家分享的javascript手風(fēng)琴下拉菜單代碼,希望對大家的學(xué)習(xí)有所幫助,動(dòng)手為自己的網(wǎng)站實(shí)現(xiàn)手風(fēng)琴下拉菜單吧!
- js實(shí)現(xiàn)簡單的手風(fēng)琴效果
- 原生JS實(shí)現(xiàn)垂直手風(fēng)琴效果
- 原生js實(shí)現(xiàn)手風(fēng)琴功能(支持橫縱向調(diào)用)
- 原生js做的手風(fēng)琴效果的導(dǎo)航菜單
- 純js實(shí)現(xiàn)手風(fēng)琴效果代碼
- js實(shí)現(xiàn)可折疊展開的手風(fēng)琴菜單效果
- 純js實(shí)現(xiàn)手風(fēng)琴效果
- Angular.js與Bootstrap相結(jié)合實(shí)現(xiàn)手風(fēng)琴菜單代碼
- 使用ReactJS實(shí)現(xiàn)tab頁切換、菜單欄切換、手風(fēng)琴切換和進(jìn)度條效果
- js實(shí)現(xiàn)帶三角符的手風(fēng)琴效果
相關(guān)文章
實(shí)例分析Array.from(arr)與[...arr]到底有何不同
這篇文章通過實(shí)例主要給大家分析介紹了關(guān)于Array.from(arr)與[...arr]到底有何不同的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04JavaScript實(shí)現(xiàn)級(jí)聯(lián)菜單的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)級(jí)聯(lián)菜單的方法,涉及javascript頁面元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06多種方法實(shí)現(xiàn)JS動(dòng)態(tài)添加事件
JS動(dòng)態(tài)添加事件的方法有很多,我們可以使用setAttribute、attachEvent 和 addEventListener等等,感興趣的朋友可以參考下2013-11-11jfinal與bootstrap的登出實(shí)戰(zhàn)詳解
這篇文章主要為大家詳細(xì)介紹了jfinal與bootstrap的登出實(shí)戰(zhàn),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11微信小程序分享功能之按鈕button 邊框隱藏和點(diǎn)擊隱藏
這篇文章主要介紹了微信小程序分享功能之按鈕button 邊框隱藏和點(diǎn)擊隱藏,需要的朋友可以參考下2018-06-06