72

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 を使用しています。このため、開発環境に関する情報を追加したいと思います。このソリューションを、PHP と JavaScript の両方の使用に影響する SilverStripe ベース (バージョン 3.0.5) の Web サイト内で使用したいと考えています。

4

11 に答える 11

97

これを試して。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=='+' ?  '-' : '+';
    });
});

純粋なCss、疑似要素で更新

http://jsfiddle.net/r4Bdz/

対応ブラウザ

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

更新 2純粋な Javascript を使用

http://jsfiddle.net/WteTy/

function handleClick()
{
    this.value = (this.value == '+' ? '-' : '+');
}
document.getElementById('collapsible').onclick=handleClick;
于 2013-04-25T21:08:55.360 に答える
82

これは、任意の HTML レイアウトで機能する別のCSS のみのソリューションです。

切り替えが必要なあらゆる要素で機能します。トグル レイアウトが何であれ、toggle 要素内に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フィドル

于 2015-08-12T14:03:47.137 に答える
6

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

<script>
        $(".btn[data-toggle='collapse']").click(function() {
            if ($(this).text() == '+') {
                $(this).text('-');
            } else {
                $(this).text('+');
            }
        });
        </script>
于 2013-04-25T21:14:26.990 に答える
0

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

<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>
于 2015-11-06T09:10:09.040 に答える
0

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')

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

二行。終わり。

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

于 2016-05-10T03:11:48.363 に答える