但愿本文所述对我们的jQuery程序设计有着援助。

解释
此处有三点必要专注。第一,增添 data-toggle=”collapse”
到你要点击的链接上,用来进展或折叠组件。
第二,增添三个 href 或三个 data-target 属性到父组件,它的值为子组件的
id。
其三,增加三个 data-parent 属性用来成立手风琴式的功用。data-parent
属性的值与主容器 div (保存整个手风琴组件)的 id
属性的值一样。固然你想要创造二个简短的折叠组件,无需像手风琴那么复杂,就不供给充足那天性格。
实例
其次个实例演示怎么样创立轻易的可折叠组件。

你也许感兴趣的篇章:

  • jquery插件制作
    手风琴Panel效果落实
  • jQuery制作效果超棒的手风琴折叠菜单
  • jQuery
    Easyui使用(一)之可折叠面板的布局手风琴菜单
  • 基于jquery的slideDown和slideUp做手风琴
  • jquery完毕手风琴效果实例代码
  • jquery手风琴特效插件
  • 依据Jquery代码达成手风琴菜单
  • 基于JQuery的一句话化解手风琴菜单
  • 依附jquery的手风琴图片体现效果落成情势
  • jquery完结手风琴效果

达成手风琴效果如图所示:

<dl class="accordion">
<dt><a href="">Panel 1</a></dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt><a href="">Panel 2</a></dt>
<dd>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</dd>
<dt><a href="">Panel 3</a></dt>
<dd>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti.</dd>
</dl>

您大概感兴趣的篇章:

  • Bootstrap
    手风琴菜单的贯彻代码
  • bootstrap手风琴制作方法详解
  • 精简实用的BootStrap
    jQuery手风琴插件
  • Angular.js与Bootstrap相结合贯彻手风琴菜单代码
  • 总总林林深入分析Bootstrap手风琴效果
  • bootstrap折叠调用collapse()后data-parent不见效的高速化解办法
  • Bootstrap基本插件学习笔记之折叠(22)
  • Bootstrap天天必学之折叠(Collapse)插件
  • Bootstrap每一天必学之折叠
  • bootstrap手风琴折叠示例代码分享
 .li_list {
        width: 100px;
        height: 300px;
        list-style: none;
        float: left;
        overflow: hidden;
      }

      .li_list img {
        width: 100%;
        height: 100%;
      }

      .divbg {
        width: 600px;
        height: 300px;
        background: rgba(230, 0, 0, 0.5);
        text-align: center;
        line-height: 300px;
        float: left;
      }

      .divbg span {
        display: block;
        width: 100px;
        height: 300px;
        float: left;
      }

      .div1 {
        width: 500px;
        height: 300px;
        float: left;
      }
      .mo{
        width: 600px;
      }

html结构:

HTML代码:

 $(".collapse").collapse() 

css代码:

js代码: