切换器
使用一个切换器来隐藏,切换,或者改变各种内容的外观。
显示和隐藏
要使用这个组件,只需要添加 data-toggle="{target: #ID}"
属性到一个 <button>
或 <a>
元素中。你可以在任意选择器中使用这个拨动属性。
拨动器会在页面的某元素中添加或者删除一个 CSS 类。默认情况下,它会添加 hide
类来隐藏这个元素。
示例
欢迎使用 FEA!
代码
<button class="btn" data-toggle="{target:'#toggle1'}">Open</button>
<div id="toggle1">...</div>
切换多个
示例
欢迎使用
代码
<button class="btn" data-toggle="{target:'.toggle2'}">切换</button>
<div class="toggle2">...</div>
<div class="toggle2 hide">...</div>
切换 CSS 类
示例
面板标题
面板内容
代码
<button data-toggle="{target:'#toggle3', toggleCls:'panel-info'}">切换</button>
<div id="toggle3" class="panel">...</div>