我基本上想最小化一些 div 。我不想使用“-”和“+”,而是想使用一些符号(来自 font-awesome)来最小化和最大化 div。
我对此的问题;如何在这段代码中插入图标的类?我尝试用 .attr 替换 .html 部分,但这没有成功。
<script>
$(".btn-minimize").click(function(){
if($(this).html() == "-"){
$(this).html("+");
}
else{
$(this).html("-");
}
$(".widget-content").slideToggle();
});
</script>
多谢。
Update:
非常感谢您迄今为止的帮助。但兄弟姐妹部分不太适合我,因为.widget-content
不是按钮之一。
总结一下;当我想最小化一个小部件并按下按钮时,所有具有该类的小部件.widget-content
最小化。
这是我的 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>
JavaScript 部分:
<script>
$(".icon-chevron-up").click(function(){
$(this).toggleClass("icon-chevron-down");
$(".widget-content").slideToggle();
});
</script>
说你给.btn-minimize
CSS 中的减号图标。你也给.btn-minimize.btn-plus
加号图标。然后你的 JavaScript 可以是这样的:
$(".btn-minimize").click(function(){
$(this).toggleClass('btn-plus');
$(".widget-content").slideToggle();
});
这是 JSFiddle 上的一个示例:http://jsfiddle.net/uzmjq/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)