search

Home  >  Article  >  Web Front-end  >  JavaScript accordion drop-down menu implementation code_javascript skills

JavaScript accordion drop-down menu implementation code_javascript skills

WBOY
WBOYOriginal
2016-05-16 15:32:501284browse

The effect of the accordion drop-down menu is more flexible. It is different from the traditional drop-down menu. This article will share with you a piece of javascript accordion drop-down menu implementation code. Take a look at the rendering first:

Specific javascript accordion drop-down menu code: 

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

The above is the javascript accordion drop-down menu code shared with you. I hope it will be helpful to your learning. Let’s implement the accordion drop-down menu for your website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Compilation of information related to js window object properties and methods_javascript skillsNext article：Compilation of information related to js window object properties and methods_javascript skills

Related articles

See more