如何将切换按钮与隐藏内容集成在一起（引导程序）

limon 发表于 Dev

利蒙

我想使用引导切换按钮（ON-OFF），这是我的html代码：

<div class="control-group">
    <label class="control-label">Filtrar por Tipo de Usuario?</label>
    <div class="controls">
        <div class="basic-toggle-button">
            <input type="checkbox" class="toggle" checked="checked" id="test"/>
        </div>
    </div>
    <div id="content" class="hide">
        <p>testing</p>
    </div>
</div>

我还有一个按钮插件（我不太了解）

我想要实现的是，当我按下开/关按钮时显示或隐藏一些内容

到目前为止，我有这个脚本：

var FormComponents = function () {

    $('.hide').hide();

        $('#test').click(function(){
            $('#content').toggle();
        });

    var handleToggleButtons = function () {
        if (!jQuery().toggleButtons) {
            return;
        }
        $('.basic-toggle-button').toggleButtons();
    }

    return {
        //main function to initiate the module
        init: function () {
            handleToggleButtons();
        }
    };
}();

所以有了这个，我有一个完美的开/关按钮。问题是，一旦按下按钮，我不知道如何集成“显示/隐藏”功能以显示某些内容。

到目前为止，我已经完成了研究，发现这更合适：

隐藏/显示功能示例

我正在尝试将这些内容放在一起以显示和隐藏内容，但是我无法使其正常运行，我是否必须编辑插件或脚本文件？我该如何运作？

特雷弗

我不确定我是否完全理解，但是这里有一个使用jQuery的示例。

的HTML

<label>Filtrar por Tipo de Usuario?</label>
   <input type="checkbox" id="test">

<div id="content" class="hide">
  <p>testing</p>
</div>

jQuery的

$(document).ready(function(){
  $('.hide').hide();
  $('#test').click(function(){
    $('#content').toggle();
  });        
});

http://jsfiddle.net/BnjJx/

更新资料

在代码上，您的handleToggleButtons函数中包含代码段，但该函数在运行时未初始化。如果将其仅放在Formcomponents函数中，则代码将在运行时进行处理并且可以正常工作。

var FormComponents = function () {   
    $('.hide').hide();
    $('#test').click(function(){
        $('#content').toggle();
    });
    var handleToggleButtons = function () {
    //etc...

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。