recherche

Maison >interface Web >js tutoriel >jquery implémente cliquez pour développer la liste tout en masquant les autres lists_jquery

jquery implémente cliquez pour développer la liste tout en masquant les autres lists_jquery

WBOY
WBOYoriginal
2016-05-16 15:46:031396parcourir

L'exemple de cet article décrit l'implémentation par jquery consistant à cliquer pour développer une liste tout en masquant d'autres listes. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Jquery est utilisé ici pour implémenter les effets d'expansion et de masquage. Après avoir cliqué sur le titre de la liste, le contenu de l'élément se développe et les autres éléments sont réduits, c'est-à-dire qu'ils ne sont pas affichés. C'est une question de préférence personnelle. Certaines personnes aiment ne pas afficher le contenu des autres options par défaut. C'est le cas et c'est uniquement à titre de référence.

La capture d'écran de l'effet en cours d'exécution est la suivante :

Le code spécifique est le suivant : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js点击展开列表</title>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
</head>
<script type="text/javascript">
// 收缩展开效果
$(document).ready(function(){
$('.box').click(function(){
$(this).children('.text').slideToggle().parents('.box').siblings('.box').children('.text').hide();
})  
});
</script>
<style type="text/css">
.box{width:200px; margin:0 auto; background:#CCC;}
.text{display:none;}
</style>
<body>
<div class="box">
  <h2>对ASP擅长的程序</h2>
  <div class="text">论坛类和文章类</div>
  </div>
</div>
<div class="box">
  <h2>对PHP擅长的程序</h2>
  <div class="text">博客类和新闻类</div>
  </div>
</div>
<div class="box">
  <h2>对前端擅长的插件</h2>
  <div class="text">jquery</div>
  </div>
</div>
</body>
</html>

J'espère que cet article sera utile à la conception de la programmation jquery de chacun.

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：Javascript implémente des compétences d'affectation_javascript continuesArticle suivant：Javascript implémente des compétences d'affectation_javascript continues

Articles Liés

Voir plus