twitter-bootstrap 如何将切换按钮与隐藏内容集成（引导程序）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19435723/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to integrate a toggle button with hidden content (bootstrap)
提问by Limon
I want to use a bootstrap toggle buttom (ON-OFF), here is my html code:
我想使用引导程序切换按钮（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>
I have also a plugin for the button (which i don't understand entirely)
我还有一个按钮插件（我完全不明白）
what i want to achieve is, to show or hide some content when i press the on/off button
我想要实现的是，当我按下开/关按钮时显示或隐藏一些内容
So far i have this script:
到目前为止，我有这个脚本：
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();
}
};
}();
So with this i have my perfect on/off button. The thing is that i don't know how to integrate the "show/hide" function to show some content once the button is pressed.
所以有了这个，我就有了完美的开/关按钮。问题是我不知道如何集成“显示/隐藏”功能以在按下按钮后显示一些内容。
So far i've done my research and found this more adequate:
到目前为止，我已经完成了我的研究，发现这更合适：
I am trying to put this things together in order to show and hide content but i can't make it work, do i have to edit the plugin or my script file? How can i make it work?
我试图将这些东西放在一起以显示和隐藏内容，但我无法使其工作，我是否必须编辑插件或我的脚本文件？我怎样才能让它工作？
回答by Trevor
I'm not sure if I understand completely but here is an example of how you can do this using jQuery.
我不确定我是否完全理解，但这里有一个示例，说明如何使用 jQuery 执行此操作。
HTML
HTML
<label>Filtrar por Tipo de Usuario?</label>
<input type="checkbox" id="test">
<div id="content" class="hide">
<p>testing</p>
</div>
jQuery
jQuery
$(document).ready(function(){
$('.hide').hide();
$('#test').click(function(){
$('#content').toggle();
});
});
Update
更新
On your code you have the snippet in your handleToggleButtons function but that function is not being initilized on runtime.. If you put it just inside your Formcomponents function the code will process at runtime and it will work.
在您的代码中，您的 handleToggleButtons 函数中有该代码段，但该函数并未在运行时初始化。
var FormComponents = function () {
$('.hide').hide();
$('#test').click(function(){
$('#content').toggle();
});
var handleToggleButtons = function () {
//etc...
回答by Vainglory07
<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>
In your CSS:
在你的 CSS 中：
#hidden_content { display: none;}
In your JAVASCRIPT:
在您的 JAVASCRIPT 中：
$('#option').click(function(){
//var val = $(this).val();
$('#hidden_content').slideToggle();
});
VIEW DEMO
查看演示
回答by Kingsley Ijomah
If for example your toggle-able icon is visible only for extra small devices, then you could do something like this:
例如，如果您的可切换图标仅对超小型设备可见，那么您可以执行以下操作：
$('[data-toggle="offcanvas"]').click(function () {
$('#side-menu').toggleClass('hidden-xs');
});
Clicking [data-toggle="offcanvas"] will add bootstrap's .hidden-xs to my #side-menu which will hide the side-menu content, but will become visible again if you increase the window size.
单击 [data-toggle="offcanvas"] 会将引导程序的 .hidden-xs 添加到我的 #side-menu 中，这将隐藏侧菜单内容，但如果增加窗口大小，它将再次可见。
