Heim > Web-Frontend > js-Tutorial > Hauptteil

jquery implementiert die gemeinsame Nutzung von Akkordeoneffekten für das Dropdown-Menü

小云云
Freigeben: 2017-12-31 16:15:02
Original
1334 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich den Akkordeoneffekt des JQuery-Dropdown-Menüs vor. Ich hoffe, dass er jedem helfen kann.

Das Beispiel in diesem Artikel teilt Ihnen den spezifischen Code für JQuery mit, um die Akkordeon-Anzeige des Dropdown-Menüs als Referenz zu implementieren. Der spezifische Inhalt ist wie folgt:

HTML-Code


<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>
Nach dem Login kopieren

CSS-Code


.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;
}
Nach dem Login kopieren

jQuery-Code


$(&#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;);

        })
Nach dem Login kopieren

Verwandte Empfehlungen:

Teilen einfacher Methoden zur Implementierung des jQuery-Akkordeoneffekts

Detailliertes Beispiel für reines CSS zur Implementierung des Akkordeons Effekt

jquery-Akkordeon-Fokusanimation

Das obige ist der detaillierte Inhalt vonjquery implementiert die gemeinsame Nutzung von Akkordeoneffekten für das Dropdown-Menü. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage