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工作。我想我会提供这段代码供你将来使用。请参阅有关何时加载/执行代码的注释：

(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它们。采用这种方法可以让我拥有一个具有良好格式和注释的源文件，但是在网站上使用了一个min文件。

我希望这有帮助！

隐藏在Drupal 8中的下拉菜单无法正常工作

1 个答案: