使用jQuery最小化/最大化div [英] Minimize / Maximize div's with jQuery

问题描述

我基本上想要最小化一些div。我不想使用 - 和+，我想使用一些符号（来自font-awesome）来最小化和最大化div。

我对此有疑问;我怎样才能在这段代码中插入图标​​的类？我尝试了用.attr替换.html部分，但是没有解决。

 < script> 
 $（。btn-minimize）。click（function（）{
 if（$（this）.html（）== - ）{
 $（this）。 （ - ）; 
} 
 ）.slideToggle（）; 
}）; 
< / script> 
  

非常感谢。

更新：

到目前为止，非常感谢您的帮助。但兄弟部分并不适合我，因为 .widget-content 不是按钮之一。

所以总结一下;当我想要最小化一个小部件并按下按钮时，所有具有类 .widget-content 的小部件最小化。

这是我的一段HTML

 <！ -  widget-1-2 - > 
< section class =widget span3> 
<！ -  front  - > 
< div id =frontclass =widget-1-2 flip> 
< div class =widget-header> 
< h2>月度统计信息< / h2> 
< div class =btn-group pull-right> 
< button id =btn-frontclass =btn>< i class =icon-cogs icon-whitealt =settings>< / i>< / button> ; 
< button class =btn btn-minimize>< i class =icon-chevron-up icon-whitealt =minimize>< / i>< / button> 
< button class =btn btn-close>< i class =icon-remove icon-whitealt =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最小化 CSS中的减号图标。你也给 .btn-minimize.btn-plus 加号图标。您的JavaScript可以如下所示：

  $（。btn-minimize）。click（function（）{
 $（this）.toggleClass（'btn-plus'）; 
 $（。widget-content）。slideToggle（）; 
}）; 
  

以下是JSFiddle的示例： http://jsfiddle.net/uzmjq/

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.

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.

<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-content isn't one of the button.

So to summarise; when I want to minimise one widget and press to button, all the widgets with the class .widget-content minimise.

This is a piece of my 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:

<script>
   $(".icon-chevron-up").click(function(){
       $(this).toggleClass("icon-chevron-down");
       $(".widget-content").slideToggle();
    });
</script>

解决方案

Say you give .btn-minimize the minus icon in CSS. You also give .btn-minimize.btn-plus the plus icon. Your javascript can then look like this:

$(".btn-minimize").click(function(){
    $(this).toggleClass('btn-plus');
    $(".widget-content").slideToggle();
});

Here's an example on JSFiddle: http://jsfiddle.net/uzmjq/

这篇关于使用jQuery最小化/最大化div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！