如果有人单击此引导程序li子菜单，如何禁用切换

Question

问题在于，当单击子菜单li时，整个对象将崩溃。 应该发生的情况是，仅当单击父项时，才应展开或折叠菜单，而不是单击子菜单项。

<ul id="menu-content2" class="menu-content collapse show">
  <!-- Single Item -->
  <li data-toggle="collapse" data-target="#clothing">
    <a href="#">clothing</a>
    <ul class="sub-menu collapse show" id="clothing">
      <li><a href="#">All</a></li>
      <li><a href="#">Bodysuits</a></li>
      <li><a href="#">Dresses</a></li>
      <li><a href="#">Hoodies &amp; Sweats</a></li>
      <li><a href="#">Jackets &amp; Coats</a></li>
      <li><a href="#">Jeans</a></li>
      <li><a href="#">Pants &amp; Leggings</a></li>
      <li><a href="#">Rompers &amp; Jumpsuits</a></li>
      <li><a href="#">Shirts &amp; Blouses</a></li>
      <li><a href="#">Shirts</a></li>
      <li><a href="#">Sweaters &amp; Knits</a></li>
    </ul>
</ul>

https://jsfiddle.net/xh0ur8kb/