单击时显示HTML子子菜单

Question

我试图创建一个子菜单项类似的菜单：

.contentDocument

我遇到的问题是当我点击子项目关闭子项目时（我不想要）

＆＃13;

＆＃13;

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

＆＃13;

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;
}

＆＃13;

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;}

＆＃13;

＆＃13;

＆＃13;

请不要使用JQuery或其他Javascript框架给我答案。当我打开菜单时（因为当我点击Sub-Sub-Item时它已经关闭），Sub-Sub-Item是打开的，但是当我点击Sub-Sub-Item时，我想这样，Sub-Item保持打开状态好。

Answer 1

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

＆＃13;

＆＃13;

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;
}

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

修改

或者完全明显的答案。我无法相信我没有早点看到这一点。只需使用event.stopPropagation

即可

＆＃13;

＆＃13;

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;
}

＆＃13;

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;}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;