Dropdown-Menü in Drupal 8 ausgeblendet

Question

Ich versuche, ein Dropdown-Menü zu erstellen, das anzeigt, wenn ein Benutzer darauf klickt, und schließt, ob der Benutzer erneut darauf klickt oder außerhalb des Menüs klickt. Jetzt habe ich ein funktionierendes Skript dank dieser Community: http://jsfiddle.net/aL7Xe/1000/

Aber wenn Sie dies auf meiner Drupal 8 Website verwenden, funktioniert es nicht, irgendwelche Ideen?

jQuery im mit:

jQuery(document).ready(function() { 
    $('.topmenu').click(function(e){ 
    e.stopPropagation(); 
     $(this).find('.dropdown-menu').toggleClass('hide'); 
    }); 
    $('html').on('click', function(){ 
     $('.dropdown-menu').addClass('hide'); 
    }); 
}); 

Vielen Dank im Voraus

GELÖST:

ich es schon gelöst, stellt sich heraus, als ich an der Debug-Funktion in Firefox @ der Konsole sucht man sagen Fehler $ ist keine Funktion. Ich fügte dann $ in der ersten Zeile hinzu, so dass es so wurde jQuery(document).ready(function($) { Und der Fehler war weg und es funktionierte.

Answer 1

Blomkfist174,

Ich bin froh, dass Sie haben Ihre JQuery arbeiten. Ich dachte, ich würde diesen Code für Sie in Zukunft anbieten. Siehe die Kommentare zu, wenn der Code laden/ausführen:

(function (Drupal, $, window) { 

    // To understand behaviors, see https://www.drupal.org/node/2269515 
    Drupal.behaviors.themename = { 
    attach: function (context, settings) { 

     // Execute code once the DOM is ready. $(document).ready() not required within Drupal.behaviors. 

     //Code in your example would go here: 
     //---------------------------------------------- 
     $('.topmenu').click(function(e){ 
     e.stopPropagation(); 
     $(this).find('.dropdown-menu').toggleClass('hide'); 
     }); 
     $('html').on('click', function(){ 
     $('.dropdown-menu').addClass('hide'); 
     }); 
     //---------------------------------------------- 


     $(window).load(function() { 
     // Execute code once the window is fully loaded. 


     }); 

     $(window).scroll(function() { 
     // Execute code when the window scrolls. 


     }); 
    } 
    }; 
} (Drupal, jQuery, this)); 

Coding Ihr Theme JS auf diese Weise ermöglicht es Ihnen, mit anderen Drupal-Bibliotheken zu interagieren. Zum Beispiel können Sie JS nach der Ausführung von Ajax ausführen. Sie müssen den Code ändern Ihr Thema Namen auf dieser Linie entsprechen:

Drupal.behaviors.themename = { 

ich aus dem Grundthema meines Thema erstellt. Diese JS-Datei wurde als Ausgangspunkt bereitgestellt. Ich benutze auch Schluck, um meine Source JS-Dateien zu nehmen und sie zu verkleinern/zu verkleinern. Wenn ich diesen Ansatz nutze, kann ich eine Quelldatei mit schönen Formatierungen und Kommentaren erstellen, aber eine Minendatei, die auf der Site verwendet wird.

Ich hoffe, das hilft!