我有一个Joomla 3网站,该网站的桌面菜单可以完美运行,而响应式菜单则不能。所有菜单项都是通过PHP mod_menu覆盖动态生成的,因此我无法手动将代码添加到各个菜单项(也不希望)。
菜单中有三层:顶层有一些直接进入URL的项目,有些是分隔符。在这些分隔符下是第二(子)级,其中一些分隔符还包含带有子级项的分隔符(我将其称为“孙子级”)。
在响应式菜单中,点击或单击顶层的下拉菜单将打开下拉菜单。这可以。单击子级分隔符时出现问题。它应该打开下一级以显示包含孙项的下拉菜单。相反,点击/单击只会将其关闭。
在桌面版本中看起来像这样:Desktop non-responsive menu
并且在响应式版本中,点击顶级(“ Press”)项目后,就像这样:Responsive menu first level open
当我点击“存档”时,它应如下所示:Responsive menu fully open但事实并非如此。它只是关闭回到“ Press”级别。
这是菜单的基本版本:
<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。我真的需要用香草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小提琴] 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的响应式菜单,使用this video作为基础,并结合了Joomla mod_menu覆盖以产生具有唯一ID的标签。每一个项目。视频显示了带有标签输入ID的硬编码菜单;动态生成它们是另一个挑战,但是要实现覆盖效果和一些巧妙的CSS,以便仅显示下拉菜单项(不访问任何链接),而不显示链接到URL的实际标签。