집 > 기사 > 웹 프론트엔드 > JavaScript 아코디언 드롭다운 메뉴 구현 code_javascript 기술

JavaScript 아코디언 드롭다운 메뉴 구현 code_javascript 기술

WBOY원래의: 2016-05-16 15:32:501224검색

아코디언 드롭다운 메뉴의 효과는 기존 드롭다운 메뉴와 다릅니다. 이 글에서는 자바스크립트 아코디언 드롭다운 메뉴 구현 코드를 살펴보겠습니다. 먼저 렌더링:

특정 자바스크립트 아코디언 드롭다운 메뉴 코드:

<!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>

위 내용은 귀하에게 공유된 자바스크립트 아코디언 드롭다운 메뉴 코드입니다. 학습에 도움이 되기를 바랍니다. 귀하의 웹사이트에 아코디언 드롭다운 메뉴를 구현해 봅시다!

성명：

이전 기사：js 윈도우 객체 속성 및 메소드_자바스크립트 스킬 관련 정보 정리다음 기사：js 윈도우 객체 속성 및 메소드_자바스크립트 스킬 관련 정보 정리

JavaScript 아코디언 드롭다운 메뉴 구현 code_javascript 기술

관련 기사