jquery implémente le partage d'effet accordéon pour le menu déroulant-js tutoriel-php.cn

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

小云云

Libérer： 2017-12-31 16:15:02

original

1267 Les gens l'ont consulté

Cet article présente principalement en détail l'effet accordéon du menu déroulant jquery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

L'exemple de cet article partage avec vous le code spécifique pour jquery pour implémenter l'affichage en accordéon du menu déroulant pour votre référence. Le contenu spécifique est le suivant

code html

<p class="site-nav">
  <ul class="site-accordion">
    <li>
      <p class="tab-head">学科领域</p>
      <ul class="tabs-list">
        <li>机械电子</li>
        <li>生物工程</li>
        <li>能源环保</li>
        <li>化学化工</li>
      </ul>
    </li>
    <li>
      <p class="tab-head">省份地区</p>
      <ul class="tabs-list">
        <li>陕西省</li>
        <li>江苏省</li>
        <li>山东省</li>
        <li>河南省</li>
      </ul>
    </li>
    <li>
      <p class="tab-head">经费范围</p>
      <ul class="tabs-list">
        <li>50万~100万</li>
        <li>100万~200万</li>
        <li>200万~500万</li>
        <li>500万以上</li>
      </ul>
    </li>
    <li>
      <p class="tab-head">需求状态</p>
      <ul class="tabs-list">
        <li>状态1</li>
        <li>状态2</li>

      </ul>
    </li>

  </ul>
</p>

Copier après la connexion

code css

.site-accordion>li{
  margin-top: 13px;
}
.site-accordion>li .tab-head{
  width: 160px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #9c9c9c;
  font-size: 16px;
  background: #f2f2f2;
}
.site-accordion>li .tab-head:hover{
  background: #292d48;
}
.site-accordion>li .tab-head:after{
  content: &#39;&#39;;
  border: 5px solid #4F5160;
  border-color: #4F5160 transparent transparent transparent;
  margin-top: 20px;
  position: relative;
  top: 10px;
  left: 5px;
}
.site-accordion>li .tabs-list{
  display: none;
}
.site-accordion>li .tabs-list li{
  width: 160px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #9c9c9c;
.site-accordion>li .tabs-list li:hover{
  background: #f2f2f2;
}

Copier après la connexion

code jQuery

$(&#39;.tab-head&#39;).click(function(){
          $(this).next().slideToggle();
          $(&#39;.tab-head&#39;).css(&#39;background&#39;,&#39;#FFFFFF&#39;);
          $(this).css(&#39;background&#39;,&#39;#292d48&#39;);

        })

Copier après la connexion

Recommandations associées :

Partage de méthodes simples pour implémenter l'effet accordéon jQuery

Explication détaillée d'exemples d'accordéon CSS pur effet

jquery accordéon Focus animation

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!