$('.tree li').on('click',function(){ $(this).children('ul').slideToggle(); })第二层点击的时候会执行两次是为什么?

下面是是我的js代码

$('.tree li').on('click',function(){
      $(this).children('ul').slideToggle();
 })

前台代码：

<ul class="tree">
   <li class="tree-current"><a href="javasrript:void(0);" >测试</a>
      <ul>
          <li><a href="javasrript:void(0);" >测试</a>
            <ul>
              <li><a href="javasrript:void(0);" title="">测试</a></li>
              <li><a href="javasrript:void(0);" title="">测试</a></li>
              <li><a href="javasrript:void(0);" title="">测试</a></li>
              <li><a href="javasrript:void(0);" title="">测试</a></li>
             <li><a href="javasrript:void(0);" title="">测试</a></li>
           </ul>
         </li>
         <li><a href="" title="">测试</a></li>
         <li><a href="" title="">测试</a></li>
         <li><a href="" title="">测试</a></li>
          <li><a href="" title="">测试</a></li>
          </ul>
        </li>
      <li><a href="" title="">测试</a></li>
     <li><a href="" title="">测试</a></li>
      <li><a href="" title="">测试</a></li>
   </ul>

javascript 事件冒泡

https://blog.csdn.net/jinjiankang/article/details/80862327