Fabriquer un accordéon simple avec jQuery

Cet article présente principalement en détail la production simple de l'accordéon jQuery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Tout d'abord, faisons un simple rendu jQuery. Le contenu spécifique est le suivant

Le code CSS est le suivant :

<style type="text/css" media="screen">
  *{margin: 0;padding: 0;}
  ul,li{list-style:none}
   ul {
    width: 300px;
    background: yellow;
    margin: 50px auto;
  }
  ul>li{
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #ccc;
  }
  ul>li>ol{
    background: blue;
    display: none;
  }
  ul>li>ol>li{
    line-height: 50px;
  }
</style>

Le code HTML est le suivant :

<ul id="ul">

  <li>
    <p>jquery的核心函数</p>
    <ol>
      <li>jQuery([selector,[context]])</li>
      <li>jQuery(html,[ownerDoc])1.8</li>
      <li>jQuery(callback) </li>
      <li>jQuery.holdReady(hold)1.6+</li>
    </ol>
  </li>
  <li>
      <p>jQuery的效果</p>
    <ol>
      <li>hide 显示和隐藏</li>
      <li>slideDown 只对高度有效</li>
      <li>fadeIn 淡入效果</li>
      <li>slideToggle 淡入和淡出效果</li>
    </ol>
  </li>
  <li>
      <p>jQuery的属性</p>
    <ol>
      <li>attr 设置或返回的元素</li>
      <li>removeAttr 从每个元素中删除一个元素</li>
      <li>prop 获取第一个元素的属性</li>
      <li>removeProp prop()方法设置属性集</li>
    </ol>
  </li>
  <li>
      <p>jQuery的事件</p>
    <ol>
      <li>off 在元素上移除多个事件的处理函数</li>
      <li>bind 为每个元素绑定事件处理函数</li>
      <li>one 为每个匹配元素绑定一次性处理函数</li>
      <li>trigger 在每个匹配的元素上触发某类事件</li>
    </ol>
  </li>

</ul>

Le code jQuery est le suivant :

<script src="jquery.min.js" type="text/javascript"charset="utf-8"></script>
<script type="text/javascript">
 $("#ul>li>p").click(function(){

  $(this).nextAll().slideDown()
  .end().parent().siblings()
  .children("ol").hide();
 }); 
</script>

Le rendu est le suivant :

Recommandations associées :

JQuery implémente le partage d'exemples d'effet accordéon simple

Détails de l'exemple jQuery implémente le menu accordéon, le menu hiérarchique, le menu supérieur, l'effet de défilement transparent

Jquery implémente le partage d'effet accordéon pour le menu déroulant

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!