Question

我基本上想要最小化一些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>

Answer 1

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

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

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

Answer 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();
});

使用jQuery最小化/最大化div

2 个答案: