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

【问题标题】：Dropdown menu hidden in Drupal 8 not working隐藏在 Drupal 8 中的下拉菜单不起作用
【发布时间】：2017-01-25 10:32:50
【问题描述】：

我正在尝试创建一个下拉菜单，显示用户何时单击它，并关闭用户是否再次单击它或在菜单外单击。感谢这个社区，现在我有了一个工作脚本：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($) { 错误消失了，它起作用了。

【问题讨论】：

标签： jquery css drop-down-menu drupal-8

【解决方案1】：

Blomkfist174，

我很高兴您的 JQuery 正常工作。我想我会提供此代码供您将来使用。查看 cmets 了解代码何时加载/执行：

(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 获取我的 Source JS 文件并对其进行 uglify/minify。采用这种方法可以让我拥有一个具有良好格式和 cmets 的源文件，以及一个在网站上使用的最小文件。

我希望这会有所帮助！

【讨论】：