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

【问题标题】：how to integrate a toggle button with hidden content (bootstrap)如何将切换按钮与隐藏内容集成（引导程序）
【发布时间】：2023-03-16 06:47:01
【问题描述】：

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

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

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

example of hide/show function

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

【问题讨论】：

标签： javascript jquery twitter-bootstrap jquery-plugins

【解决方案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 函数中有 sn-p，但该函数在运行时没有被初始化。如果您将它放在 Formcomponents 函数中，代码将在运行时处理并且它将起作用。

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

【讨论】：

我根据您的建议制作了一个版本。我必须将新的 js 代码放在另一个文件中吗？公元前这种方式行不通
您有几个选择。您可以将带有 html 文件的 js 放在结束的 body 标记内。 <script> jQuery here </script></body> 或者您应该能够将它添加到您的 Form Components 函数下方。 var FormComponents = function () { $('.hide').hide(); $('#test').click(function(){ $('#content').toggle(); }); 等..
我做到了，查看更新的代码。用这条线： $('.basic-toggle-button').toggleButtons();它不起作用。
我不太明白你想用你的代码做什么，但我找到了一种让它工作的方法。检查我的答案中的更新。
我已经用新的建议再次更新了代码。还是不行。我尝试做的是在按下 ON 按钮时显示一些内容，并在按下 OFF 时再次隐藏它。我有来自引导模板的 js 代码，不必从 0 开始。但我必须修改才能与我想要的功能集成

【解决方案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

【讨论】：

【解决方案3】：

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

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

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

【讨论】：