如何打开列表中的子项？

Question

我正在使用此脚本打开我的汉堡包菜单。这很好，但有些列表项有子项。我如何调整脚本以便在单击项目时打开子项？

		function myResponsive() {
			var x = document.getElementById("myMenu");
			if (x.className === "menu-hori") {
				x.className += " responsive";
			} else {
				x.className = "menu-hori";
			}
		}

	.menu-hori{
		width: 1100px;
		margin: auto;
		height: auto;
		margin-top: 15px;
		padding: 0px;
		display: table;
		z-index: 100;
		background: grey;
	}
	
	.menu-hori ul {
	    margin: 0;
	    padding: 0;
	    list-style: none;
	}

	.menu-hori ul ul {
	    opacity: 0;
		position: absolute;
		top: 160%;
		visibility: hidden;
		transition: all .4s ease;
		-webkit-transition: all .4s ease;
	}
	
	.menu-hori ul ul ul {
		top: 0%;
		left: 160%;
	}
	
	.menu-hori ul ul li:hover > ul {
	    top: 0%;
	    left: 100%;
	    opacity: 1;
	    visibility: visible;
	}
	
	.menu-hori ul li:hover > ul {
	    opacity: 1;
	    top: 100%;
	    visibility: visible;
	}
	
	.menu-hori ul li {
	    float: left;
	    position: relative;
	}
	
	
	.menu-hori ul ul li { float: none; }

	.menu-hori ul li {
		background-color: grey;
		cursor: pointer;
	}

	.menu-hori ul a {
		text-decoration: none;
		display: block;
		color: white;
		padding: 10px 15px;
		width: auto;
		min-width: 100px;
		text-align: center;
		text-shadow: 0px -1px 0px rgba(0,0,0,.2);
	}

	.menu-hori ul li:hover { background-color: #069CDE; }

	.menu-hori ul li a:hover { background-color: #069CDE; }
	
	.menu-hori span.dropBottom,span.dropRight {
	  display: block;
	  box-shadow: inset 2px 0px 0px #069CDE;
	  position: absolute;
	  left: 0px;
	  width: 100%;
	  height: 100%;
	  top: 0px;
	}

	.menu-hori span.dropBottom {
	  box-shadow: inset 0px 2px 0px #069CDE;
	  position: absolute;
	  width: 100%;
	  bottom: 0px;
	} 

	.menu-hori a:hover {
	  background-color: #ddd;
	  color: black;
	}

	.menu-hori .icon {
	  display: none;
	}

@media screen and (max-width: 1100px) {
  .menu-hori{
	width: 100%;
	min-height: 40px;
	height: auto;
	margin-top: 15px;
	padding: 0px;
	display: table;
	z-index: 100;
	background: grey;
	display: block;
  }
}

@media screen and (max-width: 1100px) {
	.menu-hori ul li{
		float: none;
	}
	
	.menu-hori ul li a{
		display: none;	
	}
	
	.menu-hori ul li a.icon{
		display: block;
		text-align: right;
	}
	
	.responsive ul li a{
			display: block;
	}
}

<div class="menu-hori" id="myMenu">
  <ul>
	  <li><a href="javascript:void(0);" style="font-size:15px;" class="icon"onclick="myResponsive()">☰</a></li>
     <li><a>BEVEILIGINGSCAMERA</a><span class="dropBottom"></span>
     <ul>
       <li><a href="#" class="dropRight">Analoog</a>          
         <ul>
           <li><a href="#">irc10</a></li>    
           <li><a href="#">ird29</a></li>    
           <li><a href="#">ird1</a></li>  
         </ul>
       </li>
	   </ul>
     </li>
</div>

我现在已经将问题代码片段添加到了问题中......现在已经非常多了..我想调整我的javascript，以便在点击时也会打开子项目，而不是像现在这样徘徊。

Answer 1

有简单的两步菜单的示例jQuery代码。

 $('#cssmenu li.active').addClass('open').children('ul').show();
    $('#cssmenu li.has-sub>a').on('click', function(){
      $(this).removeAttr('href');
      var element = $(this).parent('li');
      if (element.hasClass('open')) {
        element.removeClass('open');
        element.find('li').removeClass('open');
        element.find('ul').slideUp(200);
      } else {
        element.addClass('open');
        element.children('ul').slideDown(200);
        element.siblings('li').children('ul').slideUp(200);
        element.siblings('li').removeClass('open');
        element.siblings('li').find('li').removeClass('open');
        element.siblings('li').find('ul').slideUp(200);
      }
    });

HTML：

<div id="cssmenu">
<ul>
   <li><a href="#">Home</a></li>
   <li class="active has-sub open"><a href="#">Products</a>
      <ul>
         <li class="has-sub"><a href="#">Product 1</a>
            <ul>
               <li><a href="#">Sub Product</a></li>
               <li><a href="#">Sub Product</a></li>
            </ul>
         </li>
         <li class="has-sub"><a href="#">Product 2</a>
            <ul>
               <li><a href="#">Sub Product</a></li>
               <li><a href="#">Sub Product</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href="#">About</a></li>
   <li><a href="#">Contact</a></li>
</ul>
</div>

codepen