jquery - 使用 LI 下面的 div 类调用 jQuery .on click 函数

Question

我有一个无序列表，我使用 jQuery 来切换打开和关闭。单击 li 中的任何内容时，它工作得很好。但是，我试图在 li 中获得一个 < div class="prod_cat"> 作为切换。我尝试了几次迭代都没有成功。我一直在寻找没有成功的解决方案。我敢肯定这很简单，只是被我忽略了。

这适用于 li 中的所有内容。

$("li").on("click", function (e) {
    e.stopPropagation();
    $(this).children('ul').toggle();       
});

我已经尝试并未能使以下内容正常工作。

这是一个简单的 HTML 版本

<ul>
   <li>
      <div class="prod_cat"><i class="fa fa-plus"></i></div>
      Main Category
      <ul>
         <li>
            <div class="prod_cat"><i class="fa fa-plus"></i></div>
            Sub
            <ul>
               <li>
                  <div class="prod_cat"><i class="fa fa-plus"></i></div>
                  Sub
                  <ul>
                     <li>Sub
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
         <li>Sub
         </li>
      </ul>
   <li>Commissionable
   </li>
   <li>
      <div class="prod_cat"><i class="fa fa-plus"></i></div>
      Countries
      <ul>
         <li>CA
         </li>
         <li>US
         </li>
         <li>AU
         </li>
         <li>NZ
         </li>
      </ul>
   </li>
</ul>

编辑:可能相关的其他信息:

为了关闭 UL，我也使用它。

$(window).load(function () {
    $("li").find('ul').hide();
});

在看到其中一个答案(除了单击 div 时它起作用以外，它下面的所有 UL 都是打开的， child 的 child 等)后，我突然想到，也许并非所有 UL 都在加载时关闭。也许只是最上面的一个。如果我确定那是问题所在，那么这可能是 2 个问题合 1，我需要创建一个新问题。但是，我不确定。

当点击 1 旁边的 + 时，6 和 8 应该会显示，但 9 和 10 也会显示。

已编辑:这是问题的粗略 jsfiddle 再现:https://jsfiddle.net/eypxLLzc/2/

更新:这是一个 jsfiddle，代表对我有用的答案。 https://jsfiddle.net/eypxLLzc/3/

$(this).parent("li").find('> ul').toggle();  

使用这个 like to toggle 是最终的解决方案。没有 > 它将切换所有 ul。 > 仅切换级别 1 的 child 。

Answer 1

这个怎么样:

$(".prod_cat").on("click", function (e) {
        e.stopPropagation();
        $(this).parent("li").find('ul').toggle();       
    });