【发布时间】：2018-06-08 14:07:36
【问题描述】：
首先，我查看了有关此问题的其他堆栈溢出问题，但没有一个对我有帮助。我正在使用 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);
【问题讨论】：
-
尝试使用 JQuery 的 $(document).ready() 而不是 window.onload，还有为什么要将点击处理程序附加到 $('.mobile-menu-button').parent() ，您不应该附加到按钮本身吗？
-
我相信 $(window).on('load') 是使用 drupal 8 时需要使用的。加载 drupal 页面时，文档就绪会触发多次。我将事件附加到父级，因为该类位于无序列表中的跨度上，我希望点击甚至在 li 元素的整个宽度上触发，而不是其中包含的跨度元素。
-
@SocinD007 好的，事件应该仍然冒泡到 span。
-
@RyanWilson 不太确定我明白你在说什么。如果我在跨度上有事件，那么它只会在我单击文本“菜单”时触发。如果我在跨度的父级上有事件（在这种情况下是一个 li 元素），那么我可以单击“菜单”一词旁边的事件，该事件将触发所需的事件。不过，不确定为什么这适用于运行 chrome 并具有响应模式显示的桌面，但不适用于真正的移动平台。我已经尝试过使用 android 和 ios。
-
您在开发模式下的移动设备上是否出现任何错误？
标签： javascript jquery mobile onclick drupal-8