it-swarm.com.de

So fügen Sie einem Bootstrap-Akkordeon ein Plus-Minus-Symbol hinzu

Ich benutze ein Bootstrap-Akkordeon, bei dem das erste Panel immer geöffnet ist und das geöffnete Panel eine Klasse in erhält. Ich überprüfe anhand meines Jquery-Codes, ob die Klasse die Klasse enthält. In wird dieser Anker hervorgehoben. Derzeit sind jedoch alle Anker hervorgehoben.

Ich möchte nur, dass der erste Anker hervorgehoben wird, der offen ist, und der Rest der geschlossenen Platte sollte einen anderen Stil haben. 

hier ist die Geige: Fiddle

Wie Sie sehen können, werden alle Ankertags hervorgehoben. Ich möchte, dass der erste Anker ein anderes Styling bekommt. Die ganze Idee ist, dem Akkordeon ein Plus/Minus-Symbol hinzuzufügen.

10
Leroy Mikenzi

Versuchen Sie das Showereignis von collapse - bootstrap 3+

jQuery(function ($) {
    var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
    $active.find('a').prepend('<i class="glyphicon glyphicon-minus"></i>');
    $('#accordion .panel-heading').not($active).find('a').prepend('<i class="glyphicon glyphicon-plus"></i>');
    $('#accordion').on('show.bs.collapse', function (e) {
        $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
        $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    })
});

dann

.panel-heading.active {
    background-color: green;
}

Demo: Fiddle


In deinem Code

$(document).ready(function () {
    if ($('div').filter(':not(in)')) {
        $('.panel-title a').addClass('active');
    }
});

Die filter () -Methode gibt ein jQuery-Objekt zurück, sodass es immer wahr ist. Außerdem fügen Sie die Klasse allen Ankerelementen im Titel hinzu, unabhängig davon, ob sie aktiv ist oder nicht. Sie ändern sie auch nicht, wenn das Akkordeon geändert wird

7
Arun P Johny

Die @Arun P Johny-Antwort von oben wurde geringfügig geändert

First: Änderte den <i> in einen <span>-Tag gemäß der Bootstrap-3-Dokumentation

Second: Eine zweite Ereignisprüfung für Benutzer wurde hinzugefügt, die eine geöffnete Registerkarte schließen, die Klasse entfernen und das Minus-Symbol in ein Plus-Symbol ändern

Fiddle

var $active = $('#accordion .panel-collapse.in').prev().addClass('active');
$active.find('a').append('<span class="glyphicon glyphicon-minus pull-right"></span>');
$('#accordion .panel-heading').not($active).find('a').prepend('<span class="glyphicon glyphicon-plus pull-right"></span>');
$('#accordion').on('show.bs.collapse', function (e)
{
    $('#accordion .panel-heading.active').removeClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
    $(e.target).prev().addClass('active').find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
});
$('#accordion').on('hide.bs.collapse', function (e)
{
    $(e.target).prev().removeClass('active').find('.glyphicon').removeClass('glyphicon-minus').addClass('glyphicon-plus');
});
8
Kender

Wenn Sie die Plus-/Minus-Klasse ändern möchten, wenn Sie dasselbe Bedienfeld reduzieren, können Sie auf diese Weise Javascript verwenden.

<script>
var selectIds =$('#collapse1,#collapse2,#collapse3');
    $(function ($) {
    selectIds.on('show.bs.collapse hidden.bs.collapse', function () {
        $(this).prev().find('.fa').toggleClass('fa-plus fa-minus');
    })
});
</script>

Es funktioniert für diesen HTML-Block

<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel1"><i class="glyphicon glyphicon-minus"></i>Panel 1</a>
            </h4>
        </div>
    <div id="panel1" class="panel-collapse collapse in">
        <div class="panel-body">
            Contents panel 1
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                 <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel2"><i class="glyphicon glyphicon-plus"></i>Panel 2</a>
            </h4>
        </div>
        <div id="panel2" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 2
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#panel3"><i class="glyphicon glyphicon-plus"></i>Panel 3</a>
            </h4>
        </div>
        <div id="panel3" class="panel-collapse collapse">
            <div class="panel-body">
                Contents panel 3
            </div>
        </div>
    </div>
</div>

Überprüfen Sie dieses jsFiddle-Beispiel http://jsfiddle.net/navjottomer/8u57u/4/

6
nav

Arbeitsbeispiel! Sie können die Standardklasse reduziert zu allen Registerkarten hinzufügen und dann CSS wie folgt verwenden:

.subnav-button .glyphicon-plus:before {
    content: "\2212";
}
.collapsed .glyphicon-plus:before {
    content:  "\2b";
}

Dabei ist die .subnav-Schaltfläche Ihre gewünschte Button-Klasse und verwendet standardmäßige Bootstrap-Symbole. Der Inhalt von Plus wird dann durch den Inhalt von Minus ersetzt, wenn die ausgeblendete Klasse nicht auf Ihrer Schaltfläche liegt.

Dies ist der HTML-Code am Anfang:

<button data-toggle="collapse" class="subnav-button collapsed" data-target="#subnav-110">
  <li class="renoi-first-floor">
    Sitemap&nbsp;
    <span class="glyphicon glyphicon-plus subnav-icon" aria-hidden="true"></span>
  </li>
</button>

Der einzige Nachteil ist, dass Sie das Plus-Symbol in einem ausgeblendeten Tab nicht mehr verwenden können, ohne dass auch ein Minus angezeigt wird. Wenn Sie möchten, können Sie die Klasse natürlich wie folgt in eine neue Klasse kopieren:

.glyphicon-accordion-plus-minus < .glyphicon-plus

Und stattdessen das CSS zu Beginn meines Posts in die neue Klasse ändern und dann die neue Klasse im HTML-Code Ihres Akkordeons anstelle von nur Glyphicon-Plus verwenden. 

6
Lightningsoul

Das ist mein CSS

.my-button.collapse-nav-button:before {
    content: "\2212";
}
.collapsed .my-button.collapse-nav-button:before {
    content:  "\2b";
}

Das ist mein Knopf

<span class="my-button collapse-nav-button"></span>

Und dies ist mein gesamtes Akkordeon-HTML mit dem obigen Button

<div class="panel panel-default" ng-repeat="list in table_models">
 <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapse1">
    <h1 class="panel-title">
        <span class="my-button collapse-nav-button"></span>
        <a data-toggle="collapse" data-target="#colapse1" href="#">Open/Close</a>       
    </h1>
 </div>
 <div class="panel-collapse collapse fade" id="collapse1">
    <div class="panel-body">
    <!--Accordion body -->
   </div>
 </div>
</div>

Jemand antwortete auf dieselbe Weise, aber weder stimmten die Leute für ihn, noch endete er gut mit dem Zitat, dass es einen Nachteil hatte. Ich weiß nicht, über welchen Nachteil er gesprochen hat. Aber ich dachte, anstatt zu editieren, lässt man eine ordentliche Antwort hinzufügen, obwohl ich ihn gewählt habe ... Ich schlage vor, dass es keine JavaScript-Codierung dafür geben sollte. Weil dies leicht mit css und html erledigt werden kann, warum also Ihre Seite verunreinigen.?

2
Sahib Khan

Ich konnte dies mit ein paar Zeilen HTML und CSS erreichen.

a.collapsed > span.expandedIndicator, a:not(.collapsed) > span.collpasedIndicator {
  display: none;
}
<span class="collapsedIndicator">+</span>
<span class="expandedIndicator">-</span>

Fügen Sie einfach die span-Tags in das HTML-Feld ein, wo das Plus oder Minus stehen soll, und fügen Sie die CSS-Regel Ihrem Stylesheet hinzu. Wenn Sie Bootstrap 3 oder eine frühere Version verwenden, können Sie anstelle des Klartextes plus und minus Glyphicons verwenden. Dies scheint die einfachste Lösung zu sein.

1
ClarksonDev

Ok, das braucht eine neue Antwort, weil Twitter Bootstrap und jQuery viele Dinge ändern und Sie Automatisierung benötigen:

(function($) {
    $(document).ready(function(){
        if($(".collapse.in").length)
        {
            $(".collapse.in").prev().find(".panel-title a").append('<span class="glyphicon glyphicon-chevron-down pull-left"></span> ');
        }
        else
        {
            $(".collapse").prev().find(".panel-title a").append('<span class="glyphicon glyphicon-chevron-right pull-left"></span> ');
        }
        $('.panel-collapse').on({
            'hidden.bs.collapse' : function (e) {
                var active = $(this).prev().find(".panel-title a .glyphicon");
                active.removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
            },
            'show.bs.collapse' : function (e) {
                var active = $(this).prev().find(".panel-title a .glyphicon");
                active.removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
            }
        });
    });    
})(jQuery);

Dies funktioniert gut mit Twitter Bootstrap Version 3.x und jQuery 1.10.3 und alles Weitere.

Ja, nur eine andere Antwort, aber in meinem Fall wird es funktionieren, wenn Sie übergeordnete Eltern verfügen oder nicht, die nur ein offenes Archiv archivieren und alle Links geschlossen sind.

    <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne">
                <h4 class="panel-title">
                    <a data-toggle="collapse" href=".collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <i class="glyphicon glyphicon-minus"></i>
                        Collapsible Group Item #1
                    </a>
                </h4>
            </div>
            <div  class="panel-collapse collapse in collapseOne" role="tabpanel" aria-labelledby="headingOne">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse" href=".collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        <i class="glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #2
                    </a>
                </h4>
            </div>
            <div class="panel-collapse collapse collapseTwo" role="tabpanel" aria-labelledby="headingTwo">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree">
                <h4 class="panel-title">
                    <a class="collapsed" data-toggle="collapse"  href=".collapseThree" aria-expanded="false" aria-controls="collapseThree">
                        <i class="glyphicon glyphicon-plus"></i>
                        Collapsible Group Item #3
                    </a>
                </h4>
            </div>
            <div class="panel-collapse collapse collapseThree" role="tabpanel" aria-labelledby="headingThree">
                <div class="panel-body">
                    Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
            </div>
        </div>

    </div>
    <script>
        jQuery(function ($) {
            $('[data-toggle="collapse"]').on('click', function() {
                var $this = $(this),
                        $parent = typeof $this.data('parent')!== 'undefined' ? $($this.data('parent')) : undefined;
                if($parent === undefined) { /* Just toggle my  */
                    $this.find('.glyphicon').toggleClass('glyphicon-plus glyphicon-minus');
                    return true;
                }

                /* Open element will be close if parent !== undefined */
                var currentIcon = $this.find('.glyphicon');
                currentIcon.toggleClass('glyphicon-plus glyphicon-minus');
                $parent.find('.glyphicon').not(currentIcon).removeClass('glyphicon-minus').addClass('glyphicon-plus');

            });
        });
    </script>
0

Durch Hinzufügen einer Hintergrundfarbe zur Liste: active erhalten Sie eine Differenzierung, nach der Sie suchen. Wenn Sie jedoch wirklich eine Schaltfläche wünschen, verwendet bootstrap Glyphicons. Das ist was ich mit meinem gemacht habe und es sieht gut aus

<button type="button" class="btn btn-green"><span class="glyphicon glyphicon-plus"></span> Add Close Day</button>
0
LOTUSMS