尝试构建一个切换按钮，该按钮将使用引导程序和 jquery 显示和隐藏 div 框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10794362/
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
Trying to build a toggle button that will show and hide a div box using bootstrap and jquery
提问by Pieter Breed
I am trying to build a feature into my site where I have a toggle button. When the button is depressed a div should show and when the button is normal, the div should be invisible. There is also a close 'X' on the div itself, which, if clicked, should make the button normal (ie not depressed)
我正在尝试在我的网站中构建一个功能，其中我有一个切换按钮。当按钮被按下时，div 应该显示，当按钮正常时，div 应该是不可见的。div 本身也有一个关闭的“X”，如果单击它，应该使按钮正常（即未按下）
The problem is that I don't know how to un-activate the button. I can remove the class active, which updates the DOM, but it comes back from somewhere within bootstrap (Chrome breakpoint on DOM change showed me a stack trace)
问题是我不知道如何取消激活按钮。我可以删除active更新 DOM的类，但它从引导程序中的某个地方返回（DOM 更改上的 Chrome 断点向我显示了一个堆栈跟踪）
Here is my code:
这是我的代码：
var addInputButton = function(id, txt, clk) {
var btn = $('<a>')
.text(txt)
.attr("id", id)
.addClass("btn")
.addClass("btn-mini")
.attr("data-toggle", "button")
//.addClass("btn-info")
.click(clk);
$('#input_help_section')
.append(btn);
return btn;
};
// CHEATSHEET -----------------
(function() {
var toggleName = "markdownCheatSheetIsVisible";
var btnId = "markdownCheatsheetToggleButton";
var box = $("#markdownCheatsheet");
var showBox = function() {
var cheatSheetButton = $('#' + btnId);
if (!cheatSheetButton.hasClass("active")) {
cheatSheetButton.toggle();
cheatSheetButton.show();
}
box.show();
};
var hideBox = function() {
var cheatSheetButton = $('#' + btnId);
if (cheatSheetButton.hasClass("active")) {
cheatSheetButton.toggle();
cheatSheetButton.show();
}
box.hide();
};
addInputButton(btnId, "Markdown cheatsheet", function(event) {
if ($('#' + btnId).hasClass("active") === false) {
showBox();
} else {
hideBox();
}
});
$("#markdownCheatsheetClose").click(function() {
hideBox();
});
// start shown
showBox();
})();
There are a bunch of odd things here:
这里有一堆奇怪的东西：
- I tried to do
addClass('active')andremoveClass('active')in theshowBoxandhideBoxfunctions, but a trigger somewhere in bootstrap kept on adding theactiveclass back after I removed it. - The
togglemethod is defined in bootstrap and as far as I can figure it out is meant to toggle theactiveclass, but it also hides it (somewhere) and I can't toggle it away from an active state, which I don't quite understand.
- 我试着做
addClass('active')，并removeClass('active')在showBox和hideBox自举功能，但触发的地方不停地添加active类回后，我删除它。 - 该
toggle方法是在 bootstrap 中定义的，据我所知，它是为了切换active类，但它也将它隐藏（某处）并且我无法将其切换为活动状态，我不太明白.
采纳答案by Josh Metcalfe
I think periklis was right on track that you had a few to many toggle modifiers.
我认为 periklis 是正确的，你有几个到多个切换修饰符。
I created a jsfiddle.net example here as you were missing a couple small html tags to get your code to work. See http://jsfiddle.net/WHXbm/
我在这里创建了一个 jsfiddle.net 示例，因为您缺少几个小的 html 标签来使您的代码正常工作。见http://jsfiddle.net/WHXbm/
In a nutshell here are the changes:
简而言之，这里是变化：
Remove from addInputButton:
从 addInputButton 中删除：
.attr("data-toggle", "button")
Remove from showBox()
从 showBox() 中移除
if (!cheatSheetButton.hasClass("active")) {
cheatSheetButton.toggle();
cheatSheetButton.show();
}
Add to showBox()
添加到 showBox()
$("#markdownCheatsheetToggleButton").addClass("active");
Remove from hideBox()
从 hideBox() 中移除
if (cheatSheetButton.hasClass("active")) {
cheatSheetButton.toggle();
cheatSheetButton.show();
}
Add to hideBox()
添加到 hideBox()
$("#markdownCheatsheetToggleButton").removeClass("active");
回答by Jesús Carrera
I found a solution that doesn't require Javascript:
我找到了一个不需要 Javascript 的解决方案：
<div class="btn-group" data-toggle="buttons-checkbox">
<a class="btn collapse-data-btn" data-toggle="collapse" href="#details">Show details</a>
</div>
<div id="details" class="collapse">
<p>Details details details details details details details details...</p>
</div>
