手風琴下拉菜單實現的效果更靈活,不同與傳統的下拉菜單,本文就為大家分享一段javascript手風琴下拉菜單實現代碼,先看一看效果圖:

具體的javascript手風琴下拉菜單代碼:
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>手風琴下拉菜單效果</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手風琴下拉菜單代碼,希望對大家的學習有所幫助,動手為自己的網站實現手風琴下拉菜單吧!
新聞熱點
疑難解答