单击 HTML 子菜单时显示
HTML subsubmenu show when clicked
我正在尝试创建一个包含子项的菜单，如下所示：
>Menu
>Sub-Item
>Sub-Sub-Item
>Sub-Sub-Item2
>Sub-Item2
我遇到的问题是当我单击子项目时，子项目关闭（我不想要）
function menuTrigger(e){
if(!hasClass(e,"active")){
e.classList.add("active");
e.height="auto";
var child=getNextChild(e,"UL");
child.height=0;
child.style.display="block";
child.height="auto";
}
else{
if(hasClass(e,"active")){
e.classList.remove("active");
var child=getNextChild(e,"UL");
child.height=0;
child.style.display="none";
child.height="0";
}
}
}
function hasClass(element,selector)
{
var className=" "+selector+" ";
return ((" "+ element.className+ " ").replace(/['n't]/g," ").indexOf(className)>1)
}
function getNextChild(element,tagName){
for(var index=0;index<element.children.length;index++)
{
if(element.children[index].tagName==tagName.toUpperCase())
{
return element.children[index];
}
}
return null;
}body { background: #FFF;}
.wrap{width: 100%;max-width: 300px;margin:20px auto;}
.goo-collapsible{list-style: none;font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif;font-size:14px}
.goo-collapsible li.header{color: #666; padding:4px 12px;border: 1px solid #bbb;}
.goo-collapsible li { border: 1px solid #bbb;border-top:0; margin: 0;background:#F0F0F0;}
.goo-collapsible li a { text-decoration:none; color:#666;display:block; padding:8px 12px;}
.goo-collapsible li a:hover {background: #F8F8F8; text-decoration:none;}
.goo-collapsible li ul { list-style: none; background: #d3d3d3; display: none; margin:0;padding:0;}
.goo-collapsible li ul li { margin:0; border:0; border-bottom:1px solid #bbb;}
.goo-collapsible li ul li:last-child {border-bottom:0;}
.goo-collapsible li ul li a { padding: 5px 10px; display: block; padding-left: 33px;background: #d3d3d3; }
.goo-collapsible li ul li a:hover { background: #d9d9d9; }
.goo-collapsible .dropdown > a { background: url(images/arrowdown.png) no-repeat right center; }
.goo-collapsible .dropdown > a:hover { background: #F8F8F8 url(images/arrowdown.png) no-repeat right center !important; }
.goo-collapsible li ul li ul li a{ background: #f5e6ff;}<div class="wrap">
<ul class="goo-collapsible goo-coll-stacked">
<li class='dropdown' onClick="menuTrigger(this);"><a class=''><span class='icon-table'></span> Formulaires</a>
<ul>
<li class='dropdown' onClick="menuTrigger(this);"><a>Sub-Menu</a>
<ul>
<li>
<a href="somesite.html" target="_blank">Sub-SubMenu1</a>
</li>
<li>
<a href="somesite2.html" target="_blank">Sub-SubMenu2</a>
</li>
<li>
<a href="blahblah.html" target="_blank">Sub-SubMenu3</a>
</li>
<li>
<a href="blahblah2.html" target="_blank">Sub-SubMenu4</a>
</li>
<li>
<a href="blahblah3.html" target="_blank">Sub-SubMenu5</a>
</li>
</ul>
</li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span> Folder</a></li>
<li class='dropdown' onClick="menuTrigger(this);"><a href='#'><span class='icon-user'></span> Users</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-cogs'></span> Settings</a></li>
</ul>
</div>请不要使用JQuery或其他Javascript框架给我答案。当我打开菜单时（当我单击子项时它已关闭），子项是打开的，但我希望当我单击子项时，子项也保持打开状态。
我建议不要在HTML中内联事件处理程序。 而是通过 javascript 附加事件侦听器。 然后，完成此操作后，利用传递给 menuTrigger 函数的事件对象来确定事件的目标是否是子菜单。 如果是子菜单，并且事件正在为父菜单触发，则只需在menuTrigger方法的顶部执行return。 显然，使用的语法取决于您想要的跨浏览器程度。 event.target是通用的，但addEventListener()仅是IE 9+。 由于这个限制，我也选择使用querySelectorAll()，它同样是IE 9+
var dropdowns = document.querySelectorAll('.goo-collapsible .dropdown');
for(var i = 0, len = dropdowns.length; i < len; i++) {
dropdowns[i].addEventListener('click', menuTrigger);
}
function menuTrigger(e){
var el = this;
if(e.target.parentNode !== el) {
return;
}
if(!hasClass(el,"active")){
el.classList.add("active");
el.height="auto";
var child=getNextChild(el,"UL");
child.height=0;
child.style.display="block";
child.height="auto";
}
else{
if(hasClass(el,"active")){
el.classList.remove("active");
var child=getNextChild(el,"UL");
child.height=0;
child.style.display="none";
child.height="0";
}
}
}
function hasClass(element,selector)
{
var className=" "+selector+" ";
return ((" "+ element.className+ " ").replace(/['n't]/g," ").indexOf(className)>1)
}
function getNextChild(element,tagName){
for(var index=0;index<element.children.length;index++)
{
if(element.children[index].tagName==tagName.toUpperCase())
{
return element.children[index];
}
}
return null;
}body { background: #FFF;}
.wrap{width: 100%;max-width: 300px;margin:20px auto;}
.goo-collapsible{list-style: none;font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif;font-size:14px}
.goo-collapsible li.header{color: #666; padding:4px 12px;border: 1px solid #bbb;}
.goo-collapsible li { border: 1px solid #bbb;border-top:0; margin: 0;background:#F0F0F0;}
.goo-collapsible li a { text-decoration:none; color:#666;display:block; padding:8px 12px;}
.goo-collapsible li a:hover {background: #F8F8F8; text-decoration:none;}
.goo-collapsible li ul { list-style: none; background: #d3d3d3; display: none; margin:0;padding:0;}
.goo-collapsible li ul li { margin:0; border:0; border-bottom:1px solid #bbb;}
.goo-collapsible li ul li:last-child {border-bottom:0;}
.goo-collapsible li ul li a { padding: 5px 10px; display: block; padding-left: 33px;background: #d3d3d3; }
.goo-collapsible li ul li a:hover { background: #d9d9d9; }
.goo-collapsible .dropdown > a { background: url(images/arrowdown.png) no-repeat right center; }
.goo-collapsible .dropdown > a:hover { background: #F8F8F8 url(images/arrowdown.png) no-repeat right center !important; }
.goo-collapsible li ul li ul li a{ background: #f5e6ff;}<div class="wrap">
<ul class="goo-collapsible goo-coll-stacked">
<li class='dropdown'><a class=''><span class='icon-table'></span> Formulaires</a>
<ul>
<li class='dropdown'><a>Sub-Menu</a>
<ul>
<li>
<a href="somesite.html" target="_blank">Sub-SubMenu1</a>
</li>
<li>
<a href="somesite2.html" target="_blank">Sub-SubMenu2</a>
</li>
<li>
<a href="blahblah.html" target="_blank">Sub-SubMenu3</a>
</li>
<li>
<a href="blahblah2.html" target="_blank">Sub-SubMenu4</a>
</li>
<li>
<a href="blahblah3.html" target="_blank">Sub-SubMenu5</a>
</li>
</ul>
</li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span> Folder</a></li>
<li class='dropdown'><a href='#'><span class='icon-user'></span> Users</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-cogs'></span> Settings</a></li>
</ul>
</div>编辑
或者完全显而易见的答案。 我不敢相信我没有早点看到这一点。 只需使用event.stopPropagation
var dropdowns = document.querySelectorAll('.goo-collapsible .dropdown');
for(var i = 0, len = dropdowns.length; i < len; i++) {
dropdowns[i].addEventListener('click', menuTrigger);
}
function menuTrigger(e){
var el = this;
e.stopPropagation();
if(!hasClass(el,"active")){
el.classList.add("active");
el.height="auto";
var child=getNextChild(el,"UL");
child.height=0;
child.style.display="block";
child.height="auto";
}
else{
if(hasClass(el,"active")){
el.classList.remove("active");
var child=getNextChild(el,"UL");
child.height=0;
child.style.display="none";
child.height="0";
}
}
}
function hasClass(element,selector)
{
var className=" "+selector+" ";
return ((" "+ element.className+ " ").replace(/['n't]/g," ").indexOf(className)>1)
}
function getNextChild(element,tagName){
for(var index=0;index<element.children.length;index++)
{
if(element.children[index].tagName==tagName.toUpperCase())
{
return element.children[index];
}
}
return null;
}body { background: #FFF;}
.wrap{width: 100%;max-width: 300px;margin:20px auto;}
.goo-collapsible{list-style: none;font-family: 'HelveticaNeue', Arial, Helvetica, sans-serif;font-size:14px}
.goo-collapsible li.header{color: #666; padding:4px 12px;border: 1px solid #bbb;}
.goo-collapsible li { border: 1px solid #bbb;border-top:0; margin: 0;background:#F0F0F0;}
.goo-collapsible li a { text-decoration:none; color:#666;display:block; padding:8px 12px;}
.goo-collapsible li a:hover {background: #F8F8F8; text-decoration:none;}
.goo-collapsible li ul { list-style: none; background: #d3d3d3; display: none; margin:0;padding:0;}
.goo-collapsible li ul li { margin:0; border:0; border-bottom:1px solid #bbb;}
.goo-collapsible li ul li:last-child {border-bottom:0;}
.goo-collapsible li ul li a { padding: 5px 10px; display: block; padding-left: 33px;background: #d3d3d3; }
.goo-collapsible li ul li a:hover { background: #d9d9d9; }
.goo-collapsible .dropdown > a { background: url(images/arrowdown.png) no-repeat right center; }
.goo-collapsible .dropdown > a:hover { background: #F8F8F8 url(images/arrowdown.png) no-repeat right center !important; }
.goo-collapsible li ul li ul li a{ background: #f5e6ff;}<div class="wrap">
<ul class="goo-collapsible goo-coll-stacked">
<li class='dropdown'><a class=''><span class='icon-table'></span> Formulaires</a>
<ul>
<li class='dropdown'><a>Sub-Menu</a>
<ul>
<li>
<a href="somesite.html" target="_blank">Sub-SubMenu1</a>
</li>
<li>
<a href="somesite2.html" target="_blank">Sub-SubMenu2</a>
</li>
<li>
<a href="blahblah.html" target="_blank">Sub-SubMenu3</a>
</li>
<li>
<a href="blahblah2.html" target="_blank">Sub-SubMenu4</a>
</li>
<li>
<a href="blahblah3.html" target="_blank">Sub-SubMenu5</a>
</li>
</ul>
</li>
<li ><a href='#'>Comments</a></li>
<li ><a href='#'>Tags</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-folder-open'></span> Folder</a></li>
<li class='dropdown'><a href='#'><span class='icon-user'></span> Users</a>
<ul>
<li ><a href='#'>Group</a></li>
<li ><a href='#'>User</a></li>
</ul>
</li>
<li><a href='#'><span class='icon-cogs'></span> Settings</a></li>
</ul>
</div>相关文章：
- 在图像上显示菜单
- 如何在滚动时突出显示菜单按钮 - AngularJs
- 突出显示菜单项及其子菜单项
- 突出显示菜单栏上的活动菜单项
- 如何在外部文件中创建选择菜单并将其嵌入到html中以显示菜单
- 在表格最后一行(链接）中显示菜单，并在单击菜单项时显示模式窗口
- JavaScript:隐藏和显示菜单类
- 突出显示菜单上的错误
- 如何使用 JavaScript 隐藏和显示菜单
- 使用 JavaScript 隐藏和显示菜单 ID
- 隐藏/显示菜单点击javascript
- 获取显示菜单的悬停元素的属性
- 无法突出显示菜单列表的第一个元素
- 右键单击树视图的项目时显示菜单
- Javascript 仅在 iPad 上悬停显示菜单
- 第一次访问网站时，Javascript没有突出显示菜单
- 使用Jquery突出显示菜单
- 使用Angular.js和UI Router突出显示菜单时出现意外类
- jQuery下拉菜单不显示菜单
- 使用css/javascript在悬停时突出显示菜单
