折叠菜单

折叠菜单

折叠菜单有2种方式,一种是在列表菜单的基础上进行改造,代码都跟列表菜单的一样,只需要做一小点更改便可,可以更列表混合使用,列表有的属性,这个也可以有;另外一种方式是传统的web方式。

1. 列表改造的折叠菜单

1次只能显示1个内容-更多属性请参考
listview_section.html
example
  • 折叠按钮1
  • 折叠按钮2
想要哪个先做展示时,加上btn-active
example
  • 折叠按钮1
  • 折叠按钮2
想一次性打开多个折叠菜单时,加 data-multiple="true"显示多个隐藏内容
example
  • 折叠按钮1
  • 折叠按钮2
需要有标题时
example
  • 列表标题
  • 折叠按钮1
  • 折叠按钮2
需要小标题区分时
example
  • 折叠按钮1
    • 列表按钮
    • 列表按钮
    • 列表按钮
  • 分栏标题
    • 列表按钮
    • 列表按钮
    • 列表按钮
折叠菜单也有4种风格可供选择,默认就是白色的
example

第1种风格

  • 折叠按钮1
    • 列表按钮
    • 列表按钮
    • 列表按钮
  • 折叠按钮2
  • 折叠按钮3

第2种风格

  • 折叠按钮1
    • 列表按钮
    • 列表按钮
    • 列表按钮
  • 折叠按钮2
  • 折叠按钮3

第3种风格

  • 折叠按钮1
    • 列表按钮
    • 列表按钮
    • 列表按钮
  • 折叠按钮2
  • 折叠按钮3

第4种风格

  • 折叠按钮1
    • 列表按钮
    • 列表按钮
    • 列表按钮
  • 折叠按钮2
  • 折叠按钮3

2. web形式的折叠菜单

仅供参考,如果需要用到折叠菜单,推荐使用第1种方式
example
所有图标
所有按钮
普通按钮
主要按钮
如果需要默认显示就加个class=show
example
所有图标
所有按钮
普通按钮
主要按钮