javascript - 如何将切换按钮与隐藏内容集成( Bootstrap )

Question

我想使用一个 Bootstrap 切换按钮(开-关)，这是我的 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();
        }
    };
}();

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

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

example of hide/show function

我试图将这些东西放在一起以显示和隐藏内容，但我无法让它工作，我是否必须编辑插件或我的脚本文件？我怎样才能让它发挥作用？

Answer 1

我不确定我是否完全理解，但这里有一个示例，说明如何使用 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...