2013-04-25 10 views
14

Manchmal möchten wir Schaltflächen in einer Twitter-Bootstrap-Schaltflächengruppe ein-/ausblenden.Schaltfläche ausblenden in btn-group twitter-bootstrap

<div class="btn-group"> 
    <button id="one" class="btn">one</button> 
    <button id="two" class="btn">two</button> 
    <button id="three" class="btn">three</button> 
</div> 

Wenn wir Taste verstecken „zwei“ gibt es kein Problem

$('#two').hide(); 

Aber als wir die erste oder die letzte Taste, die neue erste oder neue letzte Taste nicht bekommen, abgerundete Ecken verstecken.

enter image description here

Gibt es eine Abhilfe für diese, andere als einfach entfernen und die Schaltflächen hinzufügen?

$('#one').remove(); 
$('.btn-group').append("<button id='one' class='btn'>one</button>"); 

Wenn wir dies tun, ist es schwierig, die richtige Taste zu halten, wenn Sie versteckt/weitere Schaltflächen in einer BTN-Gruppe zeigt.

+0

Wann tun Sie das? Auf einer Veranstaltung? –

Antwort

0

haben Sie versucht mit den: ersten und letzten Selektoren? Ich würde das versuchen, vielleicht die Klasse nach der Entfernung erneut anwenden?

7

Da das CSS Pseudoklassen (: last-child und: first-child) verwendet, können Sie diese Klassen nicht dynamisch mit JavaScript ändern, es sei denn, Sie entfernen/fügen sie wie beschrieben aus dem DOM heraus.

Sie können die .btn-Gruppe>: last-child und .btn-group>: first-child CSS kopieren und dynamisch anwenden, wenn Sie Schaltflächen anzeigen/ausblenden. Beachten Sie jedoch, dass Sie dieses CSS ändern müssen, wenn Sie das Bootstrap-Design oder das Erscheinungsbild der Schaltflächen ändern. Und Sie müssen verfolgen, welcher Knopf in der Gruppe zuerst ist und welcher Knopf zuletzt ist.

Einfaches Beispiel:

<style> 
    .btn-group > .currently-last { 
    -webkit-border-top-right-radius: 4px; 
    -moz-border-radius-topright: 4px; 
    border-top-right-radius: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
    -moz-border-radius-bottomright: 4px; 
    border-bottom-right-radius: 4px; 
    } 
    .btn-group > .currently-first { 
    margin-left: 0; 
    -webkit-border-top-left-radius: 4px; 
    -moz-border-radius-topleft: 4px; 
    border-top-left-radius: 4px; 
    -webkit-border-bottom-left-radius: 4px; 
    -moz-border-radius-bottomleft: 4px; 
    border-bottom-left-radius: 4px; 
    } 
</style> 
<script> 
    $("#go").click(function() { 
    $('#three').toggle(); 
    if ($('#three').is(":visible")) 
     $("#two").removeClass("currently-last"); 
    else 
     $("#two").addClass("currently-last"); 
    }); 
</script> 
+0

Das funktionierte für mich mit einer kleinen Änderung, ich musste am Ende jeder Regel '! Wichtig' hinzufügen. Ich würde gerne wissen, ob es einen besseren Weg gibt, die Regel durchzusetzen, ohne dass sie durch ": Last-Child" -Regeln abgelöst wird – gawpertron

Verwandte Themen