Próbując uczynić menu rozwijanego motyw zamiast OnClick najechaniu

Question

[Przepraszam, jeśli jest to dup każdemu, zostałem poproszony przez adminów, aby przenieść go do przepełnienia]

używam motywu Divi i co jakiś stosunkowo proste modyfikacje, aby lepiej odpowiadały moim potrzebom. Jedną rzeczą, z którą mam pewne trudności, ale zaskakująco, jest zamiana pozycji menu w pionie na rozwijanie funkcji onclick.

I już ułożyła przykład poniższy kod tutaj: 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; 
}); 

dziwne, choć nie wydaje się usunąć funkcjonalność stanu aktywowanych z menu. Przykład DIVI można znaleźć tutaj: DIVI

Uwaga: Musisz przejść do nagłówków w nawigacji i wybrać ciemną pionową nawigację, aby skopiować mój układ.

Z góry dziękuję za uwagi!

Answer 1

Twórca motywów wygenerował wynik, który wygenerował wymagany wynik.Zmiana w celu zamiany funkcjonalności nawigacji strony DIVI odbywa się w pliku o nazwie frontend-builder-scripts.js znajdującym się w katalogu folderów DIVI /includes/builder/scripts/frontend-builder-scripts.js

To zmień wskaźnik myszy, aby kliknąć, zamień poniższy kod znaleziony w linii 1074 (górny wiersz poniżej) z .hover na .click.

$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; 
} 

do

$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; 
} 

Answer 2

Generalnie powinieneś używać klas, których motyw używa do zarządzania wyświetlaniem i ukrywaniem menu, aby zachować zgodność.

KOD resposible DLA Najedź menu (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); 
}); 

JAK Unbind wyzwalanie HOVER Event # 1 (jeśli chcesz zrobić to gdzieś indziej po to jest inicjowany w custom.js):

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

JAK Unbind wyzwalanie HOVER Event # 2 (jeśli chcesz zmodyfikować custom.js tuż po kodzie):

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

JAK Unbind wyzwalanie HOVER Event # 3 (jeśli chcesz zmodyfikować custom.js:

prostu usunąć kod i zastąpić go na swojej kliknięcie kodu zdarzenia

JAK ABY WYKORZYSTAĆ KLIKNIĘCIE ZDARZEŃ - jeśli chcesz opuścić poprzedni kod zawisu - poniżej kodu zawisu lub użyć go na swoim miejscu - należy pamiętać, że musi on być użyty po custom.js lub wewnątrz po kodzie aktywującym:

$('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'); 
    } 
}); 

Kod, który ci podałem, nie ma żadnej anitmacji, więc rób to sam. Najprostszym sposobem jest użycie CSS na przykład:

<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 Przykład - wyłącza zdarzenie najechania i skonfigurować w przypadku kliknięcia.

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

dodałem kilka klas CSS w celu utrzymania jej za zgodną ze swoimi klasami css tematycznych. Dodałem klasy "nav" do UL nadrzędnego, tak jak to było w twoim motywie, i dodałem klasę "mega-menu" do rodzica z ul.sub-menu, tak jak w twoim motywie.