首先,我已经浏览了有关此问题的其他堆栈溢出问题,但没有一个对我有帮助。 我正在使用drupal 8.5.3和jquery 3.2.1。
我遇到的问题是"单击"我的移动"显示菜单"按钮不会触发 jquery 事件来显示或隐藏移动菜单。 它可以在模拟移动设备的 chrome 开发人员工具中工作,但在实际设备上它不起作用。
我尝试使用"单击","触摸启动","vclick"和"触摸"事件,但它们都没有在真实设备上工作。 我也尝试使用移动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);
在你自己的 [module/theme].libraries.yml 中,你应该将 ui,mouse 设置为库的依赖项:
dependencies:
- core/jquery.ui.mouse