jQuery implémente l'effet de liste déroulante de contenu en cliquant pour afficher-js tutoriel-php.cn

jQuery implémente l'effet de liste déroulante de contenu en cliquant pour afficher

小云云

Libérer： 2018-01-23 11:30:27

original

2166 Les gens l'ont consulté

Cet article présente principalement l'implémentation par jQuery de l'effet déroulant de contenu par clic basé sur le contrôle des événements, impliquant la réponse aux événements jQuery et le fonctionnement dynamique des attributs d'élément. Les amis qui en ont besoin peuvent s'y référer. J'espère que cela pourra vous aider. tout le monde.

1. Exemple de code :

<!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>jQuery事件</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<style type="text/css">
  body{
    font-family:微软雅黑;
    font-size:12px;
    font-stretch:normal;
    background-color:!important;
    width:400px;
    height:auto;
  }
  .total{
    border:#00FF00 solid 1px;
    font-size:12px;
  }
  .module{
    padding:6px;
    font-size:14px;
    font-weight:bolder;
    background-color:#FC6;
  }
  .content{
    padding:8px;
    font-size:12px;
    font-family:微软雅黑;
    text-align:center;
    display:none;
  }
  .open{
    background-color:#0000FF;
  }
</style>
<script type="text/javascript">
   $(function(){
      $(".content").html("你好，欢迎来到脚本之家！");
      $(".module").click(function(){
        $(this).addClass("open").next(".content").css("display","block");
        $(this).css("color","#FFFFF");
      });
   });
</script>
</head>
<body>
  <p class="total">
    <p class="module">模块</p>
    <p class="content"></p>
  </p>
</body>
</html>

Copier après la connexion

2. Exemple de résultat :

(1) Initialisation