javascript手風琴下拉菜單實現代碼

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

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

手風琴下拉菜單實現的效果更靈活，不同與傳統(tǒng)的下拉菜單，本文就為大家分享一段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手風琴下拉菜單代碼，希望對大家的學習有所幫助，動手為自己的網站實現手風琴下拉菜單吧！

您可能感興趣的文章: