Question

开始我已经查看了有关此问题的其他堆栈溢出问题，但没有人帮助过我。我正在使用drupal 8.5.3和jquery 3.2.1。

我遇到的问题是“点击”我的移动“显示菜单”按钮不会触发jquery事件来显示或隐藏移动菜单。它适用于模拟移动设备的chrome开发人员工具，但在实际设备上却不起作用。

我尝试过使用“click”，“touchstart”，“vclick”和“touch”事件，但没有一个在真实设备上运行过。我也尝试过使用移动jquery 1.4.5和移动jquery 1.5 alpha 1，但两者都没有用。我不知道为什么它在这一点上不起作用，任何帮助都会受到赞赏。

移动菜单的html标记：

<ul class="menu">
    <li class="menu-item menu-item--expanded menu-item--active-trail">
        <span target="_self" class="mobile-menu-button" data-drupal-link-system-path="<front>">Menu</span>
            <ul class="menu">
                <li class="menu-item">
                    <a href="/home" target="_self" class="mobile-menu-item" data-drupal-link-system-path="node/9">Home</a>
                </li>
                <li class="menu-item menu-item--active-trail">
                    <a href="/photos" target="_self" class="mobile-menu-item is-active" data-drupal-link-system-path="node/18">Photo</a>
                </li>
                <li class="menu-item">
                    <a href="/media" target="_self" class="mobile-menu-item" data-drupal-link-system-path="node/23">Media</a>
                </li>
                <li class="menu-item">
                    <a href="/press" target="_self" class="mobile-menu-item" data-drupal-link-system-path="press">Press</a>
                </li>
                <li class="menu-item">
                    <a href="/resume" target="_self" class="mobile-menu-item" data-drupal-link-system-path="node/20">Résumé</a>
                </li>
                <li class="menu-item">
                    <a href="/contact" target="_self" class="mobile-menu-item" data-drupal-link-system-path="contact">Contact</a>
                </li>
            </ul>
    </li>
</ul>

js点击装订：

/**
 * @file
 * A JavaScript file for the theme.
 *
 * In order for this JavaScript to be loaded on pages, see the instructions in
 * the README.txt next to this file.
 */

// JavaScript should be made compatible with libraries other than jQuery by
// wrapping it with an "anonymous closure". See:
// - https://drupal.org/node/1446420
// - http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth
(function (Drupal, $) {
  'use strict';

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

      // Execute code once the DOM is ready. $(handler) not required
      // within Drupal.behaviors.
      $(window).on('load', function () {
        // Execute code once the window is fully loaded.
        $(".mobile-menu-button").parent().once().on("click", function() {
          $(".mobile-menu-button").parent().find(".menu").toggle();
        });
      });

      $(window).on('resize', function () {
        // Execute code when the window is resized.
      });

      $(window).on('scroll', function () {
        // Execute code when the window scrolls.
      });

    }
  };

})(Drupal, jQuery);

Answer 1

在您自己的[module / theme] .libraries.yml中，应将ui，mouse设置为库的依赖项：

dependencies:
  - core/jquery.ui.mouse

Jquery点击（点击/ vclick / touchstart）无法在真实移动设备上运行

1 个答案: