web-dev-qa-db-ja.com

Twitter bootstrap collapse：トグルボタンの表示を変更

Twitter Bootstrapを使用して、折りたたみ可能なテキストセクションを作成しています。 +ボタンが押されると、セクションが展開されます。次のように私のHTMLコード：

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button type="button" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

セクションを展開した後に-の代わりに+を表示するようにボタンを変更する方法はありますか（また折りたたまれたときに+に戻ります）？

追加情報：私の問題に対するシンプルなTwitter-bootstrap/css/htmlベースのソリューションがあることを望みました。これまでの応答はすべて、JavaScriptまたはPHPを使用しています。このため、開発環境に関する情報をさらに追加します。SilverStripeベース（バージョン3.0.5）のWebサイト内でこのソリューションを使用し、PHPとJavaScriptも同様です。

javascripthtmlcsstwitter-bootstrapsilverstripe
56
Markus M.

これを試して。 http://jsfiddle.net/fVpkm/

Html：-

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

JS：-

$('button').click(function(){ //you can give id or class name here for $('button')
    $(this).text(function(i,old){
        return old=='+' ?  '-' : '+';
    });
});

Update純粋なCssでは、擬似要素

http://jsfiddle.net/r4Bdz/

サポートされているブラウザ

button.btn.collapsed:before
{
    content:'+' ;
    display:block;
    width:15px;
}
button.btn:before
{
    content:'-' ;
    display:block;
    width:15px;
}

Update 2pure JavaScriptを使用

http://jsfiddle.net/WteTy/

function handleClick()
{
    this.value = (this.value == '+' ? '-' : '+');
}
document.getElementById('collapsible').onclick=handleClick;
77
PSL

ここに別のCSSのみのソリューションがありますHTMLレイアウト。

これは、切り替える必要のある要素で機能します。どのトグルレイアウトでも、トグル要素内にif-collapsedクラスとif-not-collapsedクラスを持ついくつかの要素内に配置するだけです。

唯一の問題は、トグルの目的の初期状態を確実に設定する必要があることです。最初に閉じている場合は、collapsedクラスをトグルに配置します。

また、:notセレクターが必要なため、IE8では機能しません。

HTMLの例：

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

少ないバージョン：

[data-toggle="collapse"] {
    &.collapsed .if-not-collapsed {
         display: none;
    }
    &:not(.collapsed) .if-collapsed {
         display: none;
    }
}

CSSバージョン：

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

JSフィドル

53
Jens

ここに投稿されている他のすべてのソリューションでは、ダブルクリックするとトグルが同期しなくなります。次のソリューションでは Bootstrapフレームワークによって提供されるイベント を使用し、トグルは常に折りたたみ可能な要素の状態に一致します。

HTML：

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button id="intro-switch" class="btn btn-success" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

JS：

$('#intro').on('show', function() {
  $('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
  $('#intro-switch').html('+')
})

それはほとんどの場合に機能するはずです。

ただし、1つの折りたたみ要素とそのトグルスイッチを別の折りたたみ要素内にネストしようとすると、追加の問題が発生しました。上記のコードでは、ネストされたトグルをクリックしてネストされた折りたたみ要素を非表示にすると、親要素のトグルも変更されます。 Bootstrapのバグである可能性があります。動作するように見えるソリューションを見つけました：トグルスイッチに「折りたたみ」クラスを追加しました（折りたたみ可能な要素が非表示のときにブートストラップが追加しますが、起動しない）、それをjQueryセレクターに追加しました機能を隠す：

http://jsfiddle.net/fVpkm/87/

HTML：

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button id="intro-switch" class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">+</button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...<br>
        <a id="details-switch" class="collapsed" data-toggle="collapse" href="#details">Show details</a>
        <div id="details" class="collapse">
            More details...
        </div>
    </div>
</div>

JS：

$('#intro').on('show', function() {
    $('#intro-switch').html('-')
})
$('#intro').on('hide', function() {
    $('#intro-switch.collapsed').html('+')
})

$('#details').on('show', function() {
    $('#details-switch').html('Hide details')
})
$('#details').on('hide', function() {
    $('#details-switch.collapsed').html('Show details')
})
5
linesarefuzzy

Jqueryコードを追加します。これを行うにはjqueryが必要です。

<script>
        $(".btn[data-toggle='collapse']").click(function() {
            if ($(this).text() == '+') {
                $(this).text('-');
            } else {
                $(this).text('+');
            }
        });
        </script>
4
AzDesign

私の次のJSソリューションは、ターゲットが閉じられたときに常に「オープン」と表示されることを保証するため、ここでの他のアプローチよりも優れています。

HTML：

<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" data-toggle-secondary="Close">
    Open
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

JS：

$('[data-toggle-secondary]').each(function() {
    var $toggle = $(this);
    var originalText = $toggle.text();
    var secondaryText = $toggle.data('toggle-secondary');
    var $target = $($toggle.attr('href'));

    $target.on('show.bs.collapse hide.bs.collapse', function() {
        if ($toggle.text() == originalText) {
            $toggle.text(secondaryText);
        } else {
            $toggle.text(originalText);
        }
    });
});

例：

$('[data-toggle-secondary]').each(function() {
    var $toggle = $(this);
    var originalText = $toggle.text();
    var secondaryText = $toggle.data('toggle-secondary');
    var $target = $($toggle.attr('href'));

    $target.on('show.bs.collapse hide.bs.collapse', function() {
        if ($toggle.text() == originalText) {
            $toggle.text(secondaryText);
        } else {
            $toggle.text(originalText);
        }
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="http://netdna.bootstrapcdn.com/Twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>

<a href="#collapseExample" class="btn btn-primary" data-toggle="collapse" data-toggle-secondary="Close">
    Open
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

JSフィドル

このアプローチのその他の利点：

  • コードはDRYで再利用可能です
  • 各折りたたみボタンは別々のままです
  • hTMLに変更を加える必要があるのは、data-toggle-secondary属性を追加するだけです。
2
Harvey

+記号が正確にあるダウンロードしたコードの内部を見ることができると思います（しかし、これは非常に簡単ではないかもしれません）。

私は何をしますか？ +記号を含むDOM要素のクラス/ IDを見つけます（".collapsible"で、Javascript（実際にはjQuery）であると仮定します）：

<script>
     $(document).ready(function() {
         var content=$(".collapsible").html().replace("+", "-");
         $(".collapsible").html(content));
     });
</script>

編集わかりました...申し訳ありませんがbootstrapコードを見ていないのですが... slideToggleやslideDown and slideUpのようなもので動作すると思います...それがslideToggleだと想像してくださいいくつかの.collapsible要素の内容を明らかにするクラス.infoの要素。次に：

         $(".collapsible").click(function() { 
             var content=$(".collapsible").html();
             if $(this).next().css("display") === "none") { 
                 $(".collapsible").html(content.replace("+", "-"));
             }
             else $(".collapsible").html(content.replace("-", "+"));
         });

これは逆のことのように見えますが、実際のアニメーションは並行して実行されるため、アニメーションの前にcssを確認します。それが表示されるかどうかを確認する必要がある（つまり、アニメーションが完了すると非表示になります）次に、対応する+または-を設定します。

1
Nico

いくつかはBootstrap jsの変更で問題を起こす可能性があります（おそらく有効な場合があります）が、これを達成するための2行のアプローチがあります。

Bootstrap.jsで、Collapse.prototype.show関数を探し、this。$ trigger呼び出しを変更して、次のようにHTMLの変更を追加します。

this.$trigger
  .removeClass('collapsed')
  .attr('aria-expanded', true)
  .html('Collapse')

同様に、Collapse.prototype.hide関数でそれを変更します

this.$trigger
  .addClass('collapsed')
  .attr('aria-expanded', false)
  .html('Expand')

これにより、すべてが展開されたときの「折りたたみ」と、すべてが閉じられたときの「展開」の間でテキストが切り替わります。

2行。できた.

編集：長期これは動作しません。 bootstrap.jsはNugetパッケージの一部であるため、サーバーへの私の変更を宣伝していたとは思わない。前述のように、bootstrap.jsを編集するためのベストプラクティスではないため、PSLのソリューションを実装しました。それにもかかわらず、試してみるだけで素早く何かが必要な場合、私のソリューションはローカルで動作します。

0
scottndecker

PSLからのCSSのみのソリューション が気に入りましたが、私の場合、ボタンにHTMLを含める必要があり、この場合、コンテンツCSSプロパティはタグ付きの生のHTMLを表示しています。

それが他の誰かを助けることができる場合には、私のユースケースをカバーするために彼のフィドルを分岐させました： http://jsfiddle.net/brunoalla/99j11h40/2/

HTML：

<div class="row-fluid summary">
    <div class="span11">
        <h2>MyHeading</h2>  
    </div>
    <div class="span1">
        <button class="btn btn-success collapsed" data-toggle="collapse" data-target="#intro">
            <span class="show-ctrl">
                <i class="fa fa-chevron-down"></i> Expand
            </span>
            <span class="hide-ctrl">
                <i class="fa fa-chevron-up"></i> Collapse
            </span>            
        </button>
    </div>
</div>
<div class="row-fluid summary">
    <div id="intro" class="collapse"> 
        Here comes the text...
    </div>
</div>

CSS：

button.btn .show-ctrl{
    display: none;
}
button.btn .hide-ctrl{
    display: block;
}
button.btn.collapsed .show-ctrl{
    display: block;
}
button.btn.collapsed .hide-ctrl{
    display: none;
}
0
Bruno A.

インラインコーディングで簡単に

<button type="button" ng-click="showmore = (showmore !=null && showmore) ? false : true;" class="btn float-right" data-toggle="collapse" data-target="#moreoptions">
            <span class="glyphicon" ng-class="showmore ? 'glyphicon-collapse-up': 'glyphicon-collapse-down'"></span>
            {{ showmore !=null && showmore ? "Hide More Options" : "Show More Options" }}
        </button>


<div id="moreoptions" class="collapse">Your Panel</div>
0
Swapna Jerin