javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼

更新時(shí)間：2015年11月12日 09:15:57 作者：浮世微涼

手風(fēng)琴效果的下拉菜單大家都有見到過吧，實(shí)現(xiàn)的方法也有很多，這篇文章就為大家分享了javascript手風(fēng)琴下拉菜單實(shí)現(xiàn)代碼，純手寫的，感興趣的朋友不要錯(cuò)過。

手風(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)琴下拉菜單代碼，希望對(duì)大家的學(xué)習(xí)有所幫助，動(dòng)手為自己的網(wǎng)站實(shí)現(xiàn)手風(fēng)琴下拉菜單吧！

您可能感興趣的文章:

相關(guān)文章

Electron 結(jié)合 Selenium + chromedriver
這篇文章主要介紹了Electron 結(jié)合 Selenium + chromedriver 驅(qū)動(dòng)服務(wù)實(shí)現(xiàn)瀏覽器多開思路詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-07-07
layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能(搜索功能）
這篇文章主要介紹了layui數(shù)據(jù)表格實(shí)現(xiàn)重載數(shù)據(jù)表格功能，以搜索功能為例進(jìn)行講解，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-07-07
網(wǎng)頁(yè)防止tab鍵的使用快速解決方法
在彈出層后，tab鍵還可以在目頁(yè)中操作，這回導(dǎo)致腳本錯(cuò)誤。那么我們?nèi)绻苊膺@種情況呢？下面小編就為大家介紹一下如何解決這個(gè)問題
2013-11-11
JS實(shí)現(xiàn)的省份級(jí)聯(lián)實(shí)例代碼
這篇文章主要介紹了js下省份級(jí)聯(lián)效果，需要的朋友可以參考一下
2013-06-06
微信公眾平臺(tái) 發(fā)送模板消息(Java接口開發(fā))
這篇文章主要介紹了微信公眾平臺(tái) 發(fā)送模板消息(Java接口開發(fā))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
原生js仿jquery一些常用方法(必看篇)
下面小編就為大家?guī)?lái)一篇原生js仿jquery一些常用方法(必看篇)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2016-09-09
JavaScript 在網(wǎng)頁(yè)上單擊鼠標(biāo)的地方顯示層及關(guān)閉層
在網(wǎng)頁(yè)上單擊鼠標(biāo)的地方顯示層，供用戶選擇地點(diǎn)，同時(shí)把用戶選擇的地點(diǎn)顯示在文本框中。主要是控制層的顯示、隱藏,感興趣的朋友可以參考下
2012-12-12
JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊展開或隱藏表格行的方法
這篇文章主要介紹了JS實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊展開或隱藏表格行的方法,實(shí)例分析了javascript操作table表格與css樣式的技巧,需要的朋友可以參考下
2015-03-03
javaScript之split與join的區(qū)別(詳解)
下面小編就為大家?guī)?lái)一篇javaScript之split與join的區(qū)別(詳解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧
2017-11-11
uniapp實(shí)現(xiàn)app檢查更新與升級(jí)詳解(uni-upgrade-center)
UniApp是一個(gè)跨平臺(tái)的開發(fā)框架,可以同時(shí)開發(fā)iOS和Android應(yīng)用,下面這篇文章主要給大家介紹了關(guān)于uniapp實(shí)現(xiàn)app檢查更新與升級(jí)(uni-upgrade-center)的相關(guān)資料,需要的朋友可以參考下
2023-11-11