it-swarm.com.de

Twitter-Bootstrap-Zusammenbruch: Anzeige der Umschaltfläche ändern

Ich benutze Twitter Bootstrap, um zusammenklappbare Textabschnitte zu erstellen. Die Abschnitte werden erweitert, wenn eine +-Taste gedrückt wird. Mein HTML-Code wie folgt:

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

Gibt es eine Möglichkeit, die Schaltfläche so zu ändern, dass - anstelle von + angezeigt wird, nachdem der Abschnitt erweitert wurde (und wieder zu + wechselt, wenn er wieder ausgeblendet wird)?

Zusätzliche Informationen : Ich hoffte, dass es eine einfache Twitter-Bootstrap/css/html-basierte Lösung für mein Problem gäbe. Alle bisherigen Antworten verwenden JavaScript oder PHP. Aus diesem Grund möchte ich noch ein paar weitere Informationen zu meiner Entwicklungsumgebung hinzufügen: Ich möchte diese Lösung in einer SilverStripe-basierten (Version 3.0.5) Website verwenden, die einige Auswirkungen auf die Verwendung von PHP sowie hat JavaScript.

49
Markus M.

versuche dies. 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 Mit reinen Css, Pseudoelementen

http://jsfiddle.net/r4Bdz/

Unterstützte Browser

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

Update 2 Mit reinem Javascript 

http://jsfiddle.net/WteTy/

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

Hier ist eine weitere Lösung nur für CSS, die mit jedem HTML-Layout funktioniert.

Es funktioniert mit jedem Element, das Sie wechseln müssen. Was auch immer Ihr Toggle-Layout ist, Sie fügen es einfach in ein paar Elemente mit den if-collapsed- und if-not-collapsed-Klassen im Toggle-Element ein.

Der einzige Haken ist, dass Sie sicherstellen müssen, dass Sie den gewünschten Anfangszustand des Umschalters einstellen. Wenn es anfangs geschlossen ist, setzen Sie eine collapsed-Klasse in den Umschalter.

Es erfordert auch den :not-Selektor, so dass er auf IE8 nicht funktioniert.

HTML-Beispiel:

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

Weniger Version:

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

CSS-Version:

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

JS Fiddle

43
Jens

Alle anderen Lösungen, die hier veröffentlicht werden, führen dazu, dass der Toggle nicht mehr synchronisiert wird, wenn er doppelt angeklickt wird. Die folgende Lösung verwendet die vom Bootstrap-Framework bereitgestellten -Ereignisse , und der Umschalter entspricht immer dem Status des reduzierbaren Elements:

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('+')
})

Das sollte in den meisten Fällen funktionieren. 

Ich hatte jedoch auch ein zusätzliches Problem, wenn ich versuchte, ein zusammenklappbares Element und dessen Kippschalter in ein anderes zusammenklappbares Element zu verschachteln. Wenn ich mit dem obigen Code auf den geschachtelten Umschalter klicke, um das verschachtelte reduzierbare Element auszublenden, ändert sich auch der Umschalter für das übergeordnete Element. Es kann ein Fehler in Bootstrap sein. Ich habe eine Lösung gefunden, die scheinbar funktioniert: Ich habe den Toggle-Switches eine "collapsed" -Klasse hinzugefügt (Bootstrap fügt dies hinzu, wenn das reduzierbare Element ausgeblendet ist, aber nicht damit beginnt) Funktion ausblenden:

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

Fügen Sie Jquery-Code hinzu. Sie benötigen dazu Jquery:

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

Meine folgende JS-Lösung ist besser als die anderen Ansätze hier, weil sie dafür sorgt, dass sie immer "offen" sagt, wenn das Ziel geschlossen wird, und umgekehrt.

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

Beispiele:

$('[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 Fiddle

Andere Vorteile dieses Ansatzes:

  • der Code lautet DRY und ist wiederverwendbar
  • jede Schaltfläche zum Minimieren bleibt getrennt
  • sie müssen nur eine Änderung in den HTML-Code einfügen: Hinzufügen des data-toggle-secondary-Attributs
2
Harvey

Ich denke, Sie könnten in Ihren heruntergeladenen Code hineinschauen, wo genau ein +-Zeichen steht (dies ist jedoch möglicherweise nicht sehr einfach).

Was ich tun würde Ich würde die Klasse/ID der DOM-Elemente finden, die das +-Zeichen enthalten (vorausgesetzt, es ist ".collapsible" und mit Javascript (eigentlich jQuery):

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

edit Okay ... Entschuldigung, ich habe mir den Bootstrap-Code nicht angesehen ... aber ich denke, es funktioniert mit etwas wie slideToggle oder slideDown and slideUp... Stellen Sie sich vor, es ist eine slideToggle für die Elemente der Klasse .collapsible , die den Inhalt einiger .info-Elemente enthüllen. Dann: 

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

Dies scheint das Gegenteil zu sein. Da die eigentliche Animation jedoch parallel abläuft, werden Sie vor der Animation css überprüfen. Aus diesem Grund müssen Sie prüfen, ob sie sichtbar ist (was bedeutet, dass sie ausgeblendet wird, sobald die Animation abgeschlossen ist) und Stellen Sie dann das entsprechende + oder - ein.

1
Nico

Bei einigen kann es zu Problemen beim Ändern der Bootstrap-Js kommen (und dies ist möglicherweise gültig), aber hier ist ein zweizeiliger Ansatz, um dies zu erreichen.

Suchen Sie in bootstrap.js nach der Funktion Collapse.prototype.show, und ändern Sie den this. $ - Triggeraufruf, um die HTML-Änderung wie folgt hinzuzufügen:

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

Ebenso ändern Sie es in der Funktion Collapse.prototype.hide in 

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

Dadurch wird der Text zwischen "Ausblenden" umgeschaltet, wenn alles erweitert wird, und "Ausdehnen", wenn alles ausgeblendet ist.

Zwei Linien. Erledigt.

EDIT: Langfristig funktioniert das nicht. bootstrap.js ist Teil eines Nuget-Pakets, daher glaube ich nicht, dass es meine Änderung auf dem Server angekündigt hat. Wie bereits erwähnt, ist es nicht empfehlenswert, bootstrap.js zu bearbeiten. Daher habe ich die PSL-Lösung implementiert, die hervorragend funktioniert hat. Trotzdem funktioniert meine Lösung lokal, wenn Sie etwas schnelles benötigen, um es auszuprobieren.

0
scottndecker

Ich mochte die Nur-CSS-Lösung von PSL , aber in meinem Fall musste ich etwas HTML in die Schaltfläche einfügen, und die CSS-Eigenschaft content zeigt in diesem Fall den unformatierten HTML-Code mit Tags.

Für den Fall, dass jemand anderem helfen könnte, habe ich seine Geige gezwungen, meinen Anwendungsfall zu behandeln: 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.

Einfacher mit Inline-Codierung

<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