如何防止Javascript中带有子菜单的响应下拉子菜单中的默认行为
我有一个Joomla 3网站,它的桌面菜单工作得很好,而响应菜单却没有。所有菜单项都是由PHP mod_菜单覆盖动态生成的,因此我无法手动向单个菜单项添加代码(我也不希望这样) 菜单中有三个级别:顶层有一些直接指向URL的项目,还有一些是分隔符。在这些分隔符下是第二级(子级)分隔符,其中一些分隔符还带有子级项(我称之为“孙子”) 在响应菜单中,点击或单击顶层的下拉项打开下拉菜单。这很好。单击子级别分隔符时会出现问题。它应该打开下一个级别,显示包含孙子项的下拉菜单。相反,点击/点击只会将其关闭 在桌面版本中看起来是这样的: 在点击顶层(“按下”)项后的响应版本中,如下所示: 当我点击“存档”时,它应该如下所示: 但事实并非如此。它只是回到了“新闻”层面 这是菜单的基本版本:如何防止Javascript中带有子菜单的响应下拉子菜单中的默认行为,javascript,jquery,drop-down-menu,joomla3.0,submenu,Javascript,Jquery,Drop Down Menu,Joomla3.0,Submenu,我有一个Joomla 3网站,它的桌面菜单工作得很好,而响应菜单却没有。所有菜单项都是由PHP mod_菜单覆盖动态生成的,因此我无法手动向单个菜单项添加代码(我也不希望这样) 菜单中有三个级别:顶层有一些直接指向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>
这个(来自[30245141]的JS小提琴)
这是基于
但是什么都没用,救命
编辑:
我尝试过一些纯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");
}
}
但它们也不起作用。这一定与菜单的加载/事件的计时有关
有什么需要帮助的吗?经过长时间的努力,我终于成功地制作出了一个完全没有JS和jQuery的响应菜单,并以Joomla mod_菜单覆盖为基础,为每个项目生成具有唯一ID的标签。视频显示了一个带有标签输入ID的硬编码菜单;动态生成它们这是另一个挑战,但通过覆盖和一些巧妙的css实现,只显示下拉项的标签(不指向任何链接)但不是为了链接到URL的实际a标签。经过长时间的纠结,我最终成功地生成了一个完全没有JS和jQuery的响应菜单,并以Joomla mod_菜单覆盖为基础,为每个项目生成具有唯一ID的标签。视频显示了一个带有标签输入ID的硬编码菜单;producin动态地显示标签是另一个挑战,但通过覆盖和一些巧妙的css实现,只显示下拉项的标签(不指向任何链接)但不适用于链接到URL的实际a标记。请在Stack Exchange加入我们。对于此页面,您可以授予您的答案绿色勾号以将此页面标记为已解决。请在Stack Exchange加入我们。对于此页面,您可以授予您的答案绿色勾号以将此页面标记为已解决。
$(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');
}
});
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";