使用 jQuery 最小化/最大化 div答案

【问题标题】：Minimize / Maximize div's with jQuery使用 jQuery 最小化/最大化 div
【发布时间】：2013-04-16 09:23:55
【问题描述】：

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

我对此的问题；如何在这段代码中插入图标的类？我尝试用 .attr 替换 .html 部分，但没有成功。

<script>
  $(".btn-minimize").click(function(){
    if($(this).html() == "-"){
      $(this).html("+");
    }
    else{
      $(this).html("-");
    }
    $(".widget-content").slideToggle();
  });
</script>

非常感谢。

更新：

非常感谢您迄今为止的帮助。但是兄弟部分并不适合我，因为.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>

【问题讨论】：

标签： jquery html minimize

【解决方案1】：

假设你给.btn-minimize CSS 中的减号图标。你也给.btn-minimize.btn-plus加号图标。然后您的 javascript 可以如下所示：

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

这是一个关于 JSFiddle 的示例：http://jsfiddle.net/uzmjq/

【讨论】：

谢谢大家。效果很好！
我已经使用了你的代码，它对我有很大帮助。但现在我一直在努力解决以下问题。我一直在创建一个页面，在其中展示不同的小部件（例如图表）。对于那些小部件，我使用了或多或少相同的 div 和类作为基础。我在不同的 div 中多次使用了 .widget-content 类。因此，当我最小化一个特定的 div 时，我使用类 .widget-content 的所有 div 都会最小化。我该如何解决这个问题？
假设您将按钮和widget-content-div 放在同一个包装div 中。在那个 div 中，没有其他内容。然后，您可以修改我提供的 javascript 的第三行，如下所示：$(this).siblings('.widget-content').slideToggle();
非常感谢您到目前为止的帮助，但这个并不适合我。我已经更新了我的答案以提供更多信息。
假设每个section 标签只有一个按钮和一个小部件内容，请执行$(this).closest('section').find('.widget-content').slideToggle();。

【解决方案2】：

您可以使用 CSS 将符号/图标应用为背景图像，然后只需有一个单独的 CSS 类，其中包含其他图标，然后只需在元素中切换此类。

CSS

.btn-minimize {
  background-image: url("/path/to/icon");
}

.maximize {
  background-image: url("/path/to/another/icon");
}

jQuery

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

【讨论】：