Question

我想使用bootstrap toggle（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();
        }
    };
}();

因此，我有完美的开/关按钮。问题是，我不知道如何整合＆＃34;显示/隐藏＆＃34;按下按钮后显示某些内容的功能。

到目前为止，我已经完成了我的研究，发现这更充足：

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

Answer 2

<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="option" />
        </div>
    </div>
    <div id="hidden_content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

在你的CSS中：

#hidden_content { display: none;}

在你的JAVASCRIPT中：

$('#option').click(function(){
    //var val = $(this).val();
    $('#hidden_content').slideToggle();
});

查看DEMO

Answer 3

例如，如果您的可切换图标仅对超小型设备可见，那么您可以执行以下操作：

$('[data-toggle="offcanvas"]').click(function () {
    $('#side-menu').toggleClass('hidden-xs');
});

单击[data-toggle =“offcanvas”]会将bootstrap的.hidden-xs添加到我的＃side-menu，这将隐藏侧边菜单内容，但如果增加窗口大小，将再次显示。

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

3 个答案: