jquery implements accordion effect sharing for drop-down menu-JS Tutorial-php.cn

jquery implements accordion effect sharing for drop-down menu

小云云

Release： 2017-12-31 16:15:02

Original

1352 people have browsed it

This article mainly introduces the accordion effect of jquery drop-down menu in detail. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

The example in this article shares the specific code for jquery to implement the accordion display of the drop-down menu for your reference. The specific content is as follows

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>

Copy after login

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;
}

Copy after login

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;);

        })

Copy after login

Related recommendations:

Sharing of simple methods to implement jQuery accordion effect

Detailed example of achieving accordion effect using pure CSS

jquery accordion focus animation

The above is the detailed content of jquery implements accordion effect sharing for drop-down menu. For more information, please follow other related articles on the PHP Chinese website!