web-dev-qa-db-ja.com

jQueryでdivを最小化/最大化

私は基本的にいくつかのdivを最小化したいです。 「-」と「+」を使用する代わりに、divを最小化および最大化するためにいくつかの記号（font-awesomeから）を使用したいと思います。

これに関する私の質問。このコードにアイコンのクラスを挿入するにはどうすればよいですか？ .html部分を.attrに置き換えてみましたが、うまくいきませんでした。

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

どうもありがとう。

更新：

これまでのご協力に感謝します。しかし、.widget-contentはボタンの1つではないため、兄弟の部分は実際には私には合いません。

要約すると、 1つのウィジェットを最小化してボタンを押すと、クラス.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>
jqueryhtmlminimize
11
user2310429

CSSで.btn-minimizeにマイナスアイコンを付けたとします。また、.btn-minimize.btn-plusにプラスアイコンを付けます。 JavaScriptは次のようになります。

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

JSFiddleの例を次に示します。 http://jsfiddle.net/uzmjq/

11
Andreas Eriksson

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();
});
0
Arnelle Balane