javascript - 单击时显示 HTML 子子菜单

标签 javascript html css

我正在尝试创建一个菜单，其中包含类似这样的子项:

>Menu
 >Sub-Item
  >Sub-Sub-Item
  >Sub-Sub-Item2
 >Sub-Item2

我遇到的问题是，当我点击 Sub-Sub-Item 时，子元素关闭(这是我不想要的)

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 框架给我答案。当我打开菜单时(因为当我点击 Sub-Sub-Item 时它已经关闭)Sub-Sub-Item 是打开的，但我希望当我点击 Sub-Sub-Item 时，Sub-Item 保持打开状态好吧。

最佳答案

我建议不要在 HTML 中内联事件处理程序。而是通过 javascript 附加事件监听器。然后，一旦你这样做了，利用传递给 menuTrigger 函数的事件对象来确定事件的目标是否是子菜单。如果它是一个子菜单并且事件是为父菜单触发的，只需在 menuTrigger 方法的顶部执行一个 return。显然，使用的语法取决于您想要的跨浏览器。 event.target is universal , 但是 addEventListener() is IE 9+ only .由于该限制，我还选择使用 querySelectorAll(), which is similarly 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>

关于javascript - 单击时显示 HTML 子子菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35846035/

上一篇：javascript - Angular js ng类不起作用

下一篇：javascript - AngularJS TinyMCE textarea 专注于 Click 事件

相关文章：

Javascript:localStorage 使 if 语句瘫痪？

html - 如何将 css 应用于类和 ID？

html - 水平滚动 - Div - 页面内容 css 类

javascript - Chrome 错误地将语言环境应用于 CSSStyleSheet 中的值

javascript - 突出显示特定圆半径内的所有路线(谷歌地图)

javascript - 在 jquery mobile 中添加和删除收藏夹功能，并在单独的 ListView 中查看收藏夹项目

html - 导航栏在 IE6、7、8 中显示不佳，但适用于 9 和所有其他浏览器

html - <hr> 标签中间有 'OR'

html - 背景附件图像 : fixed not working on mobile

css - Safari CSS 问题

©2024 IT工具网  联系我们