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

Maison

interface Web

js tutoriel

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

May 16, 2016 pm 03:32 PM

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 :

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;手风琴下拉菜单效果&lt;/title&gt;
&lt;script src="js/jquery-1.11.1.js"&gt;&lt;/script&gt;
&lt;style&gt;
  *{
    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;
  }
   
&lt;/style&gt;
&lt;script&gt;
$(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');
    })
  })
   
})
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul class="nav"&gt;
  &lt;li&gt;
    &lt;div&gt;水果&lt;/div&gt;
    &lt;ul class="u"&gt;
      &lt;li&gt;香蕉&lt;/li&gt;
      &lt;li&gt;橘子&lt;/li&gt;
      &lt;li&gt;梨子&lt;/li&gt;
      &lt;li&gt;西瓜&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div&gt;蔬菜&lt;/div&gt;
    &lt;ul class="u"&gt;
      &lt;li&gt;芹菜&lt;/li&gt;
      &lt;li&gt;黄瓜&lt;/li&gt;
      &lt;li&gt;洋葱&lt;/li&gt;
      &lt;li&gt;西瓜&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;
    &lt;div&gt;肉类&lt;/div&gt;
    &lt;ul class="u"&gt;
      &lt;li&gt;鸡肉&lt;/li&gt;
      &lt;li&gt;兔肉&lt;/li&gt;
      &lt;li&gt;鸭肉&lt;/li&gt;
      &lt;li&gt;龙肉&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

Copier après la connexion

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 de ce site Web

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