Toggle-button zum erweitern/reduzieren divs

Habe ich zwei divs nebeneinander und möchte die toggle-Funktion zum Zusammenbruch eines div (Sidebar) horizontal und erweitern die anderen (Map) für die volle Breite der ehemaligen. Würde ich dann benötigen Sie den Knebel zurück zu bringen, beide divs zu Ihrer ursprünglichen Breite/Positionen. Ich kann es zu tun die erste operation, aber ich habe keine Ahnung, wie Sie tun das Gegenteil. Sehen Fiddle:

    $(document).ready(function(){
        $("#toggle").click(function(){
            $("#sidebar").animate({width: 'toggle'});
            $("#map").animate({width: '100%'});     
        });
    });

InformationsquelleAutor user3716388 | 2014-06-13

  1. 5

    Versuchen, diese

    HTML

    <input type="button" data-name="show" value="Toggle" id="toggle">

    Skript

    $(document).ready(function () {
            $("#toggle").click(function () {
                if ($(this).data('name') == 'show') {
                    $("#sidebar").animate({
                        width: '0%'
                    }).hide()
                    $("#map").animate({
                        width: '100%'
                    });
                    $(this).data('name', 'hide')
                } else {
                    $("#sidebar").animate({
                        width: '19%'
                    }).show()
                    $("#map").animate({
                        width: '80%'
                    });
                    $(this).data('name', 'show')
                }
            });
        });

    DEMO

    Dein code funktioniert Super und hat den besten slide-Effekt. Es ist genau das, was ich suchte. Danke!
    Vielen Dank 🙂
    Ich möchte nur darauf hinweisen, das funktioniert nicht richtig. Sie können sehen, dass die Seitenleiste sichtbar unter der Karte, wenn die Animationen beginnen (wenn Sie zurückkommt).

    InformationsquelleAutor Sridhar R

  2. 1

    Müssen Sie nur überprüfen, ob das div-Element 100% oder 80%.

    $(document).ready(function () {
    $("#toggle").click(function () {
        $("#sidebar").animate({
            width: 'toggle'
        });
        var value = $("#map")[0].style.width !== "100%" ? '100%' : '80%';
        $("#map").animate({
            width: value
        });
    });
});

    Arbeiten Geige

    Auch auf dieser, der Seitenleiste gedrängt unter der Karte. Nicht die beste Lösung.
    wo und Wann die sidebar wird immer geschoben, unter die Karte? welche browser testen?
    Mit Chrome (aktuell), können Sie diese anzeigen, indem nur gerade die Bildlaufleiste bei jedem Klick wechseln. Sie werden sehen, es wird größer und dann wieder normal gehen. Gleiche mit IE, tho Sie wurde mit Hilfe von jQuery 1.10.1 und IE scheinen nicht zu mögen und hat überhaupt nicht funktioniert.
    Dieser code funktioniert eigentlich auch mit dem, was ich auf Arbeit bin.
    ja, ich wusste immer noch nicht bekommen, was Ruddy spricht.

    InformationsquelleAutor Mr_Green

  3. 1

    Normalerweise verwende ich eine zweite css-Klasse", sagt der aktuelle status der div. So etwas wie collapsed wird geändert oder entfernt, wenn der div sich erweitert, so können Sie prüfen, ob diese zweite Klasse um zu bestimmen, welche Aktion der Benutzer anfordert.

    Geige bearbeitet: http://jsfiddle.net/8wKxY/6/

    Etwas wie dieses:

    $(document).ready(function(){
    $("#toggle").click(function(){
        if($(this).hasClass('expanded')){
            $("#sidebar").stop().animate({width: '19%'});
            $("#map").stop().animate({width: '80%'});
            $(this).removeClass('expanded');
        }
        else {
            $("#sidebar").stop().animate({width: '100%'});
            $("#map").stop().animate({width: '100%'});      
            $(this).addClass('expanded');
        }
    });
});

    In dem Beispiel, das ich angehängt habe die control-Klasse direkt auf den button, aber es wäre besser geeignet zum befestigen an einem gemeinsamen container, der zwei erweiterbare divs.

    Beachten Sie auch, dass Sie wahrscheinlich benötigen, um eine owerflow: hidden - Eigenschaft in der Seitenleiste auf, so dass es nicht geht, unter die Karte zu zerbrechen. In meinem Beispiel habe ich komplett die Seitenleiste ausblenden, nachdem die animation beendet ist.

    Gute Arbeit, aber bitte auch zeigen Sie Ihren code.
    Die sidebar wird nur geschoben unter die Karte... dies funktioniert nicht.
    Wahrscheinlich müssen Sie nur anpassen, breiten
    Ihre Antwort, Sie sollten es beheben.
    Ich glaube, wir sollten vor allem zeigen Sie Richtungen und helfen Sie anderen Benutzern Konzeptionen, als Sie die copy-paste etwas, was Sie nicht verstehen. Ich glaube, dass die Theorie hinter meine Antwort korrekt ist, auch wenn die Geige Ergebnis ist nicht 100% perfekt. Ich sicher, wird es beheben, aber ich glaube nicht, dass es so wichtig ist, an dieser Stelle.

    InformationsquelleAutor Mir

  4. 0

    JQuery toggleClass()

    Arbeiten Demo 

    $(document).ready(function(){
  $("#toggle").click(function(){
            $("#sidebar").animate({width: 'toggle'});
            $("#map").toggleClass('fullWidth');     
  });
});
    .fullWidth{
    width : 100% !important;
}

    InformationsquelleAutor Shaunak D

Schreibe einen Kommentar