Question

我很尴尬地问，但是我遇到了一个非常原始的问题。

我有一个非常简单的菜单，其中包括以下内容

<div id="mySidenav">
 <li>
   <a></a>
     <ul>
      <li></li>
      <li></li>
      <li></li>
    </uL>
 </li>

 <li><a></a>
   <ul>
     <li><a></a>
        <ul>
          <li></li>
          <li></li>
        </ul>
      </li>
   </ul>
</div>

现在我有一个非常简单的jquery来隐藏所有内部UL的{{1}}

要切换内部$("#mySidenav li > ul").hide();，请使用

ul

但是，现在我遇到了问题。每当我单击内部UL时，父级 UL就会“点击”并自行关闭。

我该如何解决？

Answer 1

这是因为事件bubbles up是DOM树。

如果list element A中包含list element B，并且单击元素A，然后为元素A触发click事件，然后将起泡并发射出元素B。这是因为从技术上讲您同时点击了这两个元素。

为防止此行为，请使用event.stopPropagation

停止传播

$("#mySidenav li").click(function(event){
    $(this).children("ul").toggle();
     event.stopPropagation();
 })

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="mySidenav">
 <li>
   <a>parent 1</a>
     <ul>
      <li>list 1</li>
      <li>list 2</li>
      <li>list 3</li>
    </ul>
 </li>

 <li><a>parent list 2</a>
   <ul>
     <li><a>list 4.1</a>
        <ul>
          <li>list 4.1.1</li>
          <li>list 4.1.2</li>
        </ul>
      </li>
   </ul>
</div>

通过单击内部UL防止父UL崩溃

1 个答案: