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

Question

我正在尝试创建一个下拉菜单，当用户单击它时显示，并关闭用户再次单击它或单击菜单外部。多亏了这个社区，现在我有了一个可用的脚本：http://jsfiddle.net/aL7Xe/1000/

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

jQuery 我正在使用：

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 工作正常。我想我会提供此代码供您将来使用。请参阅代码何时 load/execute:

的注释

(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 = {

我从 Basic 主题创建了我的主题。此 JS 文件是作为起点提供的。我还使用 gulp 获取我的 Source JS 文件和 uglify/minify 它们。采用这种方法可以让我拥有一个格式和注释都很好的源文件，但是一个在网站上使用的最小文件。

希望对您有所帮助！

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

Dropdown menu hidden in Drupal 8 not working

css

jquery

drupal-8

drop-down-menu