Exemple d'explication de l'implémentation jquery de l'effet de menu pliant-js tutoriel-php.cn

Exemple d'explication de l'implémentation jquery de l'effet de menu pliant

小云云

Libérer： 2018-01-23 09:22:46

original

2556 Les gens l'ont consulté

Cet article présente principalement des exemples de jquery implémentant l'effet de menu pliant, qui a une bonne valeur de référence. Jetons un coup d'œil avec l'éditeur ci-dessous, j'espère que cela pourra aider tout le monde.

Il s'agit d'une implémentation simple de l'effet de boîte pliante. La méthode slideToggle() dans la bibliothèque jQ de contenu principal

Le rendu est le suivant :

code CSS :

  .con_ul{

  padding: 0;
  margin: 0;
  overflow: auto;
  }
  .con_ul li{
  list-style: none;
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid #CCCCCC;
  }
  .con_ul li .title{
  padding-right: 20px;
  background-image: url(images/drop_1fcaf417.png);//默认的背景
  background-position: 100% 0px;
  background-repeat: no-repeat;
  }
  .con_ul li .title.act{
  padding-right: 20px;
  background-image: url(images/top.png);//展开后的背景
  background-position: 100% 0px;
  background-repeat: no-repeat;
  }
  .con{
  background-color: #F4F4F4;
  display: none;//内容本分默认隐藏
  padding: 5px;
  margin: 10px 0;
  }

Copier après la connexion

code HTML : en utilisant la disposition ul li, je pense que la structure du code est plus concise et claire

 <ul class="con_ul">
  <li>
  <p class="title">
   标题
  </p>
  <p class="con">
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>  
  </li>
  <li>
  <p class="title">
   标题
  </p>
  <p class="con">
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>  
  </li>
  <li>
  <p class="title">
   标题
  </p>
  <p class="con">
   内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</p>  
  </li>
 </ul>

Copier après la connexion

code javascript :

 <script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
 <script>
  $('.con_ul li .title').click(function(){    
  $(this).toggleClass('act');//获取当前点击对象，切换act类，达到切换背景箭头的效果
  $(this).next().slideToggle();/获取当前点击对象的下一个兄弟级，实现折叠效果切换  
  })
 </script>

Copier après la connexion

Recommandations associées :

exemple de code d'implémentation slideToggle+slideup pour l'effet de menu pliant sur téléphone mobile

Pliage des coins arrondis effet spécial de menu implémenté en CSS pur Code_html/css_WEB-ITnose

js entièrement compatible avec le menu de pliage de tampon secondaire mis en surbrillance menu_navigation

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!