隐藏在Drupal 8中的下拉菜单不起作用

Question

im 尝试创建一个下拉菜单，该菜单在用户单击它时显示，并在用户再次单击它还是在菜单外部单击它时关闭。现在我有一个工作脚本，感谢这个社区：http://jsfiddle.net/aL7Xe/1000/

但是当我在我的drupal 8网站上使用它时，它不起作用，有什么想法吗？

jQuery im using ：

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

提前致谢

解决：

我已经解决了它，事实证明，当我查看Firefox @控制台中的调试功能时，它说错误$ 不是一个函数。然后我在第一行添加了 $，所以它变成了这样jQuery(document).ready(function($) { 错误消失了，它起作用了。

Answer 1

Blomkfist174，

我很高兴你让你的JQuery工作。 我想我会提供此代码供您将来使用。 有关代码何时加载/执行，请参阅注释：

(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));

以这种方式编写主题的JS将允许您与其他Drupal库进行交互。 例如，您可以在 Ajax 运行后运行 JS。 您需要修改以下代码以匹配此行的主题名称：

Drupal.behaviors.themename = {

我

从基本主题创建了我的主题。 此JS文件是作为起点提供的。 我还使用 gulp 来获取我的源 JS 文件并丑化/缩小它们。 采用这种方法使我拥有一个具有良好格式和注释的源文件，但有一个在网站上使用的最小文件。

我希望这有帮助！