Der Versuch, das Dropdown-Menü des Themas OnClick statt Hover zu erstellen

Lesezeit: 4 Minuten

[Sorry if this is a dup to anyone, I was asked by the admins to move it to overflow]

Ich verwende das DIVI-Design und nehme einige relativ einfache Änderungen daran vor, um meinen Anforderungen besser gerecht zu werden. Eine Sache, mit der ich überraschenderweise einige Schwierigkeiten habe, ist das Austauschen der Hover-Status-Dropdowns des vertikalen Menüs gegen die Onclick-Funktionalität.

Ich habe hier ein Beispiel für den folgenden Code zusammengestellt: JSFIDDLE

$('ul.top-menu').children('.menu-item-has-children').click(function(){
    $(this).children('.sub-menu').slideToggle('slow');
}).children('ul').find('.menu-item').click(function (event) { //select all the `.child` elements and stop the propagation of click events on the elements
    event.stopPropagation();
    return false;
});

Seltsamerweise kann ich die Hover-State-Funktionalität anscheinend nicht aus dem Menü entfernen. Ein Beispiel für DIVI finden Sie hier: DIVI

Hinweis: Sie müssen in der Navigation zu den Kopfzeilen gehen und die dunkle vertikale Navigation auswählen, um mein Layout zu replizieren.

Vielen Dank im Voraus für Ihre Gedanken!

  • Was brauchen Sie nur, um den Hover-Status zu entfernen?

    – Benutzer5200704

    2. August 2016 um 13:49 Uhr

  • Ich muss den Schwebezustand des Menüs durch einen Klickzustand ersetzen. Ich habe die Stylesheets durchgesehen und den Hover-Status in früheren Bemühungen entfernt, um die Änderung zu beheben, jedoch keine Freude.

    – Huginn

    2. August 2016 um 14:21 Uhr

Im Allgemeinen sollten Sie Klassen verwenden, die das Thema verwendet, um das Anzeigen und Ausblenden des Menüs zu verwalten, um es kompatibel zu halten.

CODE VERANTWORTLICH FÜR HOVER-MENÜ (custom.js):

var $et_top_menu = $( 'ul.nav' );

$et_top_menu.find( 'li' ).hover( function() {
    if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
        $(this).addClass( 'et-show-dropdown' );
        $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
    }
}, function() {
    var $this_el = $(this);

    $this_el.removeClass( 'et-show-dropdown' );

    setTimeout( function() {
        if ( ! $this_el.hasClass( 'et-show-dropdown' ) ) {
            $this_el.removeClass( 'et-hover' );
        }
    }, 200 );
} );

HOW TO UNBIND TRIGGERING HOVER EVENT #1 (wenn Sie dies woanders tun möchten, nachdem es in custom.js initialisiert wurde):

 $( 'ul.nav li' ).off("hover");

HOW TO UNBIND TRIGGERING HOVER EVENT #2 (wenn Sie custom.js direkt nach dem Code ändern möchten):

$et_top_menu.find( 'li' ).off("hover");

HOW TO UNBIND TRIGGERING HOVER EVENT #3 (wenn Sie custom.js ändern möchten:

Entfernen Sie einfach den Code und ersetzen Sie ihn durch Ihren On-Click-Ereigniscode

SO MACHEN SIE ON CLICK EVENT – Wenn Sie den vorherigen Hover-Code belassen möchten – unter dem Hover-Code vorbei oder an Ihrer Stelle verwenden – beachten Sie, dass er nach custom.js oder innerhalb des Hover-Codes verwendet werden muss:

$( 'ul.nav li' ).off("hover");

$et_top_menu.find( 'li' ).click( function() {
    if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
        $(this).toggleClass( 'et-show-dropdown' );
        $(this).toggleClass( 'et-hover' );
    }
});

Der Code, den ich dir gegeben habe, hat keine Animation, also mach es selbst. Der einfachste Weg ist zum Beispiel die Verwendung von CSS:

<YOUR SELECTOR> {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

FIDDLE BEISPIEL – es schaltet das HOVER-Ereignis aus und richtet das ON CLICK-Ereignis ein.

http://jsfiddle.net/gwn9aqxs/2/

Ich habe einige CSS-Klassen hinzugefügt, um sie mit den CSS-Klassen Ihres Themas kompatibel zu halten. Ich habe “nav”-Klassen zum übergeordneten UL hinzugefügt, genau wie in Ihrem Design, und ich habe die Klasse “mega-menu” zum übergeordneten Element von ul.sub-menu hinzugefügt, genau wie in Ihrem Design.

  • Danke fürs Nachmachen. Wirklich eine großartige Antwort, leider löst sie sich in DIVI nicht wie erwartet auf. Ich hatte zuvor versucht, eine sehr ähnliche Anpassung durch den Vorschlag des Theme-Entwicklers vorzunehmen, aber aus irgendeinem Grund bleibt der Hover-Zustand bestehen und ignoriert die Aufforderung, in einen Klick-Zustand zu wechseln.

    – Huginn

    2. August 2016 um 15:07 Uhr

  • Versuchen Sie, $( ‘ul.nav li’ ).off(“hover”); und richten Sie ein einfaches On-Click-Ereignis mit alert(1) ein; Versuch es. Es ist unmöglich, nicht zu arbeiten 🙂 Können Sie mir die Adresse der Website geben?

    – Landon

    2. August 2016 um 15:43 Uhr

  • Das Wichtigste ist, es nach der Initialisierung (in custom.js) zu platzieren. Denken Sie daran, dass sich der Code in custom.js in $(document).ready( function(){

    – Landon

    2. August 2016 um 15:45 Uhr


  • Ich kann die Adresse der Website nicht teilen, aber hier ist ein Link, der Ihren Code in der Datei custom.js anzeigt. emailimagestorage.com/capture-1.png Für Sie sieht alles so aus, wie es soll?

    – Huginn

    2. August 2016 um 17:06 Uhr

Der Theme-Entwickler hat ein Ergebnis erstellt, das das erforderliche Ergebnis erzeugt hat. Die Änderung zum Austausch der Funktionalität der Seitennavigation von DIVI erfolgt in einer Datei namens frontend-builder-scripts.js im DIVI-Ordnerverzeichnis /includes/builder/scripts/frontend-builder-scripts.js

Um den Hover zu ändern, um zu klicken, tauschen Sie den folgenden Code in Zeile 1074 (oberste Zeile unten) von .hover zu .click aus.

$et_top_menu.find( 'li' ).hover( function() {
     if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
     $(this).addClass( 'et-show-dropdown' );
     $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
            et_menu_hover_triggered = true;
}

zu

$et_top_menu.find( 'li' ).click( function() {
     if ( ! $(this).closest( 'li.mega-menu' ).length || $(this).hasClass( 'mega-menu' ) ) {
     $(this).addClass( 'et-show-dropdown' );
     $(this).removeClass( 'et-hover' ).addClass( 'et-hover' );
            et_menu_hover_triggered = true;
}

  • Es ist nicht empfehlenswert, Themendateien zu ändern – alle Aktualisierungen überschreiben die Änderungen. Erweitern Sie die Funktion am besten in einem sicheren Bereich. Die Themenoptionen bieten dies und es wäre am besten, benutzerdefinierte Skripte vor dem schließenden Body-Tag hinzuzufügen. Den Hover lösen und das Klickereignis anhängen ist die richtige Lösung.

    – Joel Karunungan

    27. April 2020 um 16:45 Uhr

1390150cookie-checkDer Versuch, das Dropdown-Menü des Themas OnClick statt Hover zu erstellen

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy