使用 jQuery 最小化/最大化 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16164672/
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
Minimize / Maximize div's with jQuery
提问by
I basically want to minimise some div's . Instead of using "-" and "+", I want to use some symbols (from font-awesome) to minimise and maximise the div's.
我基本上想最小化一些 div 的 . 我想使用一些符号（来自 font-awesome）来最小化和最大化 div，而不是使用“-”和“+”。
My question concerning this; how can I insert the classes of the icons in this piece of code? I tried by replacing the .html part with .attr, but that didn't worked out.
我的问题; 如何在这段代码中插入图标的类？我尝试用 .attr 替换 .html 部分，但没有成功。
<script>
$(".btn-minimize").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$(".widget-content").slideToggle();
});
</script>
Thanks a lot.
非常感谢。
Update:
更新：
Thanks a lot for your help so far. But the sibling part doesn't really fit me because .widget-contentisn't one of the button.
非常感谢您到目前为止的帮助。但是兄弟部分并不适合我，因为.widget-content它不是按钮之一。
So to summarise; when I want to minimise one widget and press to button, all the widgets with the class .widget-contentminimise.
所以总结一下; 当我想最小化一个小部件并按下按钮时，该类的所有小部件都会.widget-content最小化。
This is a piece of my HTML
这是我的一段 HTML
<!--widget-1-2-->
<section class="widget span3">
<!--front-->
<div id="front" class="widget-1-2 flip">
<div class="widget-header">
<h2>Monthly Statistics</h2>
<div class="btn-group pull-right">
<button id="btn-front" class="btn"><i class="icon-cogs icon-white" alt="settings"></i></button>
<button class="btn btn-minimize"><i class="icon-chevron-up icon-white" alt="minimize"></i></button>
<button class="btn btn-close"><i class="icon-remove icon-white" alt="close"></i></button>
</div>
</div>
<div class="widget-content"><p>Dit is de voorkant.</p></div>
</div><!--/front-->
</section>
And the JavaScript part:
和 JavaScript 部分：
<script>
$(".icon-chevron-up").click(function(){
$(this).toggleClass("icon-chevron-down");
$(".widget-content").slideToggle();
});
</script>
采纳答案by Andreas Eriksson
Say you give .btn-minimizethe minus icon in CSS. You also give .btn-minimize.btn-plusthe plus icon. Your javascript can then look like this:
假设您.btn-minimize在 CSS 中给出减号图标。您还提供.btn-minimize.btn-plus加号图标。你的 javascript 看起来像这样：
$(".btn-minimize").click(function(){
$(this).toggleClass('btn-plus');
$(".widget-content").slideToggle();
});
Here's an example on JSFiddle: http://jsfiddle.net/uzmjq/
这是一个关于 JSFiddle 的例子：http: //jsfiddle.net/uzmjq/
回答by Arnelle Balane
You can use CSS to apply the symbols/icons as background images, then just have a separate CSS class which contains the other icons which and then just toggle this class in the element.
您可以使用 CSS 将符号/图标应用为背景图像，然后只需有一个单独的 CSS 类，其中包含其他图标，然后只需在元素中切换此类。
CSS
CSS
.btn-minimize {
background-image: url("/path/to/icon");
}
.maximize {
background-image: url("/path/to/another/icon");
}
jQuery
jQuery
$(".btn-minimize").click(function() {
$(this).toggleClass("maximize");
$(".widget-content").slideToggle();
});
