2

我想使用引导切换按钮（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();
        }
    };
}();

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

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

隐藏/显示功能示例

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

4

3 回答 3

4

我不确定我是否完全理解，但这里有一个如何使用 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...
于 2013-10-17T20:24:16.513 回答
1 
<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();
});

查看演示

于 2013-10-18T01:13:43.650 回答
0

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

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

单击 [data-toggle="offcanvas"] 会将引导程序的 .hidden-xs 添加到我的 #side-menu 中，这将隐藏侧面菜单内容，但如果您增加窗口大小，它将再次可见。

于 2015-02-03T10:25:54.423 回答