javascript - 如何在Javascript中使用子菜单防止响应式下拉子菜单li中的默认行为
问题描述
我有一个 Joomla 3 网站,其桌面菜单可以完美运行,而响应式菜单则不能。所有菜单项都是由 PHP mod_menu 覆盖动态生成的,因此我无法手动将代码添加到单个菜单项(我也不希望这样做)。
菜单分为三个级别:顶层有一些直接指向 URL 的项目,还有一些是分隔符。在这些分隔符下是第二(子)级,其中一些还具有带有子级项目的分隔符(我将称它们为“孙子”)。
在响应式菜单中,点击或单击顶层的下拉项目会打开下拉菜单。这可以。单击子级分隔符时会出现问题。它应该打开下一个级别以显示带有孙项的下拉菜单。相反,点击/单击只会将其关闭。
在桌面版本中看起来像这样: 桌面无响应菜单
在响应式版本中点击顶层(“按下)”项后就像这样: 响应式菜单第一级打开
当我点击“存档”时,它应该看起来像这样: 响应式菜单完全打开 但它没有。它只是回到“新闻”级别。
这是菜单的基本版本:
<div id="mySidenav">
<ul class="navbar-nav">
<li class="nav-item item-101">/* item numbers generated dynamically */ Home</li>
<li class="nav-item item-102">Another page</li>
<li class="nav-item item-103 divider deeper parent dropdown show">[separator]
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="true">Press + caret</a>
<ul class="nav-child unstyled dropdown-menu show">
<li class="nav-item item-104">Article page</li>
<li class="dropdown-submenu dropright">
<a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">Archive + caret</a> /* this closes back up to 'Press' when tapped */
<ul class="nav-child unstyled dropdown-menu show">
<li class="nav-item item-111">
<a class="dropdown-item href="/press/archive/2018-19">Reviews 2018-19</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
我在这里浏览了几十个帖子,但大多数似乎都处理更高级别的下拉菜单,这对我来说很好,但不是下一个级别。我已经尝试过 JS/jQuery 的这些(和变体)。我真的需要在 vanilla Javascript 中解决这个问题,因为 Joomla 正在 J4x 中放弃对 jQuery 的支持,而且我也不能使用最新的 JS e6。
我试过这个,它适用于我的 J4 开发站点,但不适用于 J3:
$(function() {
$("ul.dropdown-menu [data-toggle='dropdown']").on("click", function(event) {
event.preventDefault();
event.stopPropagation();
$(this).siblings().toggleClass("show");
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
});
});
还有这个(来自 [30245141] 的 JS Fiddle)4
$(document).ready(function() {
// Hide the sub-items
$('#mySidenav > ul > li > ul > li > ul').hide();
$('#mySidenav ul > li > ul > li.dropdown-submenu.dropright').on('click', function(event) {
if ($(this).children('ul:not(:visible)').length > 0) {
event.preventDefault();
$(this).children('#mySidenav ul > li > ul > li > ul').addClass('show');
} else {
// Normal behaviour
}
});
});
$('li.dropdown-submenu.dropright a').on('click', function (event) {
$(this).parent().toggleClass('show');
});
$('body').on('click', function (e) {
if (!$('li.dropdown-submenu.dropright').is(e.target)
&& $('li.dropdown-submenu.dropright').has(e.target).length === 0
&& $('.show').has(e.target).length === 0
) {
$('li.dropdown-submenu.dropright').removeClass('show');
}
});
但没有任何工作。帮助!
编辑:
我尝试了一些纯 JS,只是试图向下拉列表添加背景颜色,如下所示:
window.onload=function(){mOrange()};
function mOrange(){
var m, i;
m = document.getElementById("mySidenav").querySelectorAll("ul.nav-child.dropdown-menu.show li.dropdown-submenu.dropright.show ul.nav-child.dropdown-menu.show");
for (i = 0; i < m.length; i++) {
m[0].classList.add("bgorange");
}
}
并且还使用这种添加类的方法:
m[0].className += " bgorange";
但它们也不起作用。它必须与加载菜单/事件时间有关。
请问有人帮忙吗?
解决方案
经过很长时间的努力,我最终制作了一个完全没有 JS 和 jQuery 的响应式菜单,使用这个视频作为基础,结合 Joomla mod_menu 覆盖来为每个项目生成具有唯一 ID 的标签。该视频显示了一个带有标签输入 ID 的硬编码菜单;动态生成它们是另一个挑战,但在覆盖和一些狡猾的 css 中实现了仅显示下拉项目的标签(不转到任何链接),而不是链接到 URLS 的实际 a 标签。
推荐阅读
- c# - 在winform中单击时忽略另一个项目前面的项目
- java - 时区方法不改变当前的即时时间
- react-native - 反应本机手势处理程序不调用事件
- python - 它不会将 QuerySet 过滤器数据返回到 HTML
- powershell - 为什么读取 .CSV 文件时 ForEach-object 循环停止工作
- javascript - 需要在邮递员中将 API 成功响应复制到剪贴板
- class - 如何决定一个方法是否应该属于哪个类?
- php - 如何在不授予他访问 Web 应用程序的权限的情况下从匿名用户那里获取数据
- html - 我的网站的 CSS 动画在任何浏览器中都不起作用
- c# - 绑定 ObservableCollection 中的对象属性更改不会更改 UI 值