使用 LI 下面的 div class 调用 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 都打开，children of children，等等。 ) 也许并不是所有的 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 children.

Answer 1

这个怎么样：

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

Answer 2

怎么样：

$(".prod_cat").click(function (e) {
    e.stopPropagation();
    $(this).next("ul").toggle();
    return false;
});

但是，将代码基于 HTML 结构是不好的做法，最好使用直接赋值，如下所示：

<ul>
<li>
  <div class="prod_cat"><i class="fa fa-plus"></i></div>
  Main Category
  <ul>
     <li>
        <a class="prod_cat" target="#lvl1" rel="toggleList"><i class="fa fa-plus"></i></a>
        Sub
        <ul id="lvl1">
           <li>
              <a class="prod_cat" target="#lvl1_1" rel="toggleList"><i class="fa fa-plus"></i></a>
              Sub
              <ul id="lvl1_1">
                 <li>Sub
                 </li>
              </ul>
           </li>
        </ul>
     </li>
     <li>Sub
     </li>
  </ul>

与

$("[rel='toggleList']").click(function(e){
    e.preventDefault();
    $(this.target).toggle();
    return false;
});

使用 LI 下面的 div class 调用 jQuery .on click 函数

Using a div class below an LI to call jQuery .on click fucntion

css

jquery

toggle

html-lists