Menü-links mit jquery

Rodrigo

Ich versuche, die gesamte seitliche Menüleiste (#menu_links) ein- und auszublenden, wenn der Browser auf weniger als 750 Pixel getunnelt ist.

Weiß jemand, warum die seitliche Menüleiste (#menu_links) nicht ausgeblendet wird, indem der Rand des Browsers passiert wird, wenn Sie auf "#menu_button" klicken, wenn die Browsergröße weniger als 750 beträgt?

https://menusel-169ba.firebaseapp.com/

$(document).ready(function () {

    $('#menu_links').css({ width: '50px' });
    $('.collapse-menu').addClass('hidden');

    $('ul#menu_links li').hover(function () {
        $('span', this).addClass('show');
        $('span', this).removeClass('hidden');
    }, function () {
        $('span', this).addClass('hidden');
        $('span', this).removeClass('show');
    });


  // Muesrta panel de CAMBIAR CONTRASEÑA
    $('a.test').on("click", function (e) {
        $(this).next('ul').toggle();
        e.stopPropagation();
        e.preventDefault();
    });


    var timesClicked = 0;
    $("#menu_button").click(function () {
        timesClicked++
        if (timesClicked % 2 == 0) {
            $('#menu_links').animate({ width: '50px' }, 350);
            $('.collapse-menu').removeClass('show');
            $('.collapse-menu').addClass('hidden');

            $('ul#menu_links li').hover(function () {
                $('span', this).addClass('show');
                $('span', this).removeClass('hidden');
            }, function () {
                $('span', this).addClass('hidden');
                $('span', this).removeClass('show');
            });
        } else {
            $('#menu_links').animate({ width: '200px' }, 350);
            $('.collapse-menu').addClass('show');
            $('.collapse-menu').removeClass('hidden');

            $('ul#menu_links li').hover(function () {
            }, function () {
                $('span', this).addClass('show');
                $('span', this).removeClass('hidden');
            });
        }
        console.log(timesClicked % 2);
    });


    var menu_buttonVar = document.querySelector("#menu_button"),
        menu_linksVar = document.querySelector("#menu_links");


    // checkWidth() BREACK-POINTS
    function checkWidth() {
        var windowSize = $(window).width();

        if (windowSize <= 750) {
            console.log("screen width is less than 480");
            menu_linksVar.style.left = "-50px";


            $('#menu_button').click(function () {
                $('#menu_links').animate({
                    left: '0px',
                }, 0);
            });
        } // END if

        else {
            console.log("screen width is greater than or equal to 960");
            menu_linksVar.style.left = "0px";
        }
    };

    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);
}); // END documentReady
Rodrigo

Jetzt ist mein Menü fertig und es funktioniert gut. Der nächste Schritt besteht darin, den Code so zu synthetisieren, dass er mit den gleichen Funktionen, aber mit weniger Zeichen arbeitet.

Hier ist der Link:

https://menusel-169ba.firebaseapp.com/

Vielen Dank.

Dieser Artikel stammt aus dem Internet. Bitte geben Sie beim Nachdruck die Quelle an.

Bei Verstößen wenden Sie sich bitte [email protected] Löschen.

bearbeiten am
0

Lass mich ein paar Worte sagen

0Kommentare
LoginNach der Teilnahme an der Überprüfung

Verwandte Artikel

TOP Liste

  1. 1

    Wie aktualisiere ich ein Feld in einer Raumdatenbank mit einem Repository und einem Ansichtsmodell?

  2. 2

    Wie füge ich mehrere Spalten in einer Spalte mit derselben Tabelle in SQL Server zusammen?

  3. 3

    Wie kann man Gitterquadrate dazu bringen, die Farbe zu ändern?

  4. 4

    Ich kann nicht verstehen, wie man Go-Code in mehreren Dateien kompiliert

  5. 5

    Zählen Sie die Vorkommen jedes Werts in einem Tupel in Python

  6. 6

    Gibt es eine sauberere Möglichkeit, Konstruktorargumente und Instanzeigenschaften einer Klasse in Typescript zu definieren?

  7. 7

    So implementieren Sie Pushwoosh mit ionic 2

  8. 8

    Wie wird der Wert im Dropdown-Menü basierend auf den ausgewählten Daten / IDs angezeigt?

  9. 9

    Tomcat - Leiten Sie den alten Kontextstamm zum neuen Kontextstamm um

  10. 10

    Ändern Sie den Knotenpfad in das aktuelle Verzeichnis

  11. 11

    So erstellen Sie ein Array von Objekten aus zwei Arrays von Objekten mit einem gemeinsamen Schlüssel - JavaScript

  12. 12

    Rufen Sie die ID aus der Datagrid-Ansicht ab und zeigen Sie die Daten in Textfeldern einem anderen Formular an

  13. 13

    base js: Wie füge ich einem Objekt eine Eigenschaft auf die 'alte' Weise hinzu?

  14. 14

    Ersetze einen Teil einer Zeichenfolge durch eine Pandas-Spalte als Muster

  15. 15

    Blättern Sie auf Radio Click zur Abschnitts-ID

  16. 16

    CBCentralManager wird nach dem Verbinden neu gestartet

  17. 17

    Scherz, wie man eine Funktion verspottet, die von einer verspotteten Funktion zurückgegeben wird

  18. 18

    django-allauth Empfängersignal zum Hinzufügen einer Gruppenberechtigung zum Benutzer bei der Anmeldung

  19. 19

    Tic Tac Toe-Spiel im React-Reset-Button funktioniert nicht

  20. 20

    AQL: Teilweise Übereinstimmung in einer Reihe von Zeichenfolgen

  21. 21

    So summieren Sie die Werte zweier Tabellen und gruppieren sie nach Datum

heißlabel

Archiv