切换器

使用一个切换器来隐藏，切换，或者改变各种内容的外观。

显示和隐藏

要使用这个组件，只需要添加 data-toggle="{target: #ID}" 属性到一个 <button> 或 <a> 元素中。你可以在任意选择器中使用这个拨动属性。

拨动器会在页面的某元素中添加或者删除一个 CSS 类。默认情况下，它会添加 hide 类来隐藏这个元素。

示例

代码

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