html js-手风琴jquery

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html js-手风琴jquery相关的知识,希望对你有一定的参考价值。

<!-- HTML -->
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
</div>

<!-- accordion -->
<script>
  $(function() {
    $( "#accordion" ).accordion({
        heightStyle: "content",
        autoHeight: false,
        clearStyle: true
    });
    
    //open tab by default
    $( ".selector" ).accordion({ active: 1 });
    //getter
    var active = $('.selector').accordion('option', 'active');
    
  });
</script>

以上是关于html js-手风琴jquery的主要内容,如果未能解决你的问题,请参考以下文章

bootstrap实现手风琴功能(树形列表)

jQuery手风琴效果

jQuery UI之手风琴

前端:运用js和jquery实现风琴图

前端:运用js和jquery实现风琴图

手风琴效果