Maison > Article > interface Web > Implémentation du menu déroulant accordéon JavaScript Compétences code_javascript

Implémentation du menu déroulant accordéon JavaScript Compétences code_javascript

WBOYoriginal: 2016-05-16 15:32:501224parcourir

L'effet du menu déroulant accordéon est plus flexible. Il est différent du menu déroulant traditionnel. Cet article partagera avec vous un morceau de code d'implémentation du menu déroulant accordéon javascript. rendu en premier :

Code du menu déroulant accordéon javascript spécifique :

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

Ce qui précède est le code du menu déroulant accordéon javascript partagé avec vous. J'espère qu'il vous sera utile pour votre apprentissage. Implémentons le menu déroulant accordéon pour votre site Web !

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Compilation d'informations relatives aux propriétés des objets de fenêtre js et aux compétences méthodes_javascriptArticle suivant：Compilation d'informations relatives aux propriétés des objets de fenêtre js et aux compétences méthodes_javascript

Articles Liés

Voir plus