单击复选框时显示/隐藏一个 li children

Question

我有一个很大的未排序的类别列表，供用户核对他们希望他们的产品属于哪个类别。每个 Parent 类别都有 children。我想隐藏所有 children，当您检查 parent 类别时，显示该类别的 children。我已经尝试过这段代码，它会切换所有 children 元素，而不仅仅是当前正在检查的 li 中的元素。

jQuery

    $('.wcvendors-pro-dashboard-wrapper ul.product_cat_checklist > li > input[type=checkbox]').change(function()
     {
   if ($(this).is(':checked')) {
      $( ".wcvendors-pro-dashboard-wrapper ul.product_cat_checklist li > ul.children" ).toggle( "slow", function() {
      });

      };
    });

列表

<ul class="product_cat_checklist">
    <li id="product_cat-15"><input class="wcv_category_check" value="15" type="checkbox" name="product_cat[]" id="in-product_cat-15" data-parsley-multiple="product_cat">
    <label class="selectit" for="in-product_cat-15">Home Furnishings</label>
        <ul class="children">
        <li id="product_cat-61">
            <input class="wcv_category_check" value="61" type="checkbox" name="product_cat[]" id="in-product_cat-61" data-parsley-multiple="product_cat">
            <label class="selectit" for="in-product_cat-61">Bedroom</label>
        </li>
        <li id="product_cat-63">
            <input class="wcv_category_check" value="63" type="checkbox" name="product_cat[]" id="in-product_cat-63" data-parsley-multiple="product_cat">
            <label class="selectit" for="in-product_cat-63">Children’s Furniture</label>
        </li>
        <li id="product_cat-60">
            <input class="wcv_category_check" value="60" type="checkbox" name="product_cat[]" id="in-product_cat-60" data-parsley-multiple="product_cat">
            <label class="selectit" for="in-product_cat-60">Kitchen &amp; Dining</label>
        </li>
        </ul>
    </li>

    <li id="product_cat-38">
        <input class="wcv_category_check" value="38" type="checkbox" name="product_cat[]" id="in-product_cat-38" data-parsley-multiple="product_cat"> 
        <label class="selectit" for="in-product_cat-38">Arts &amp; Crafts</label>
        <ul class="children">
            <li id="product_cat-53">
                <input class="wcv_category_check" value="53" type="checkbox" name="product_cat[]" id="in-product_cat-53" data-parsley-multiple="product_cat"> 
                <label class="selectit" for="in-product_cat-53">Art Supplies</label>
            </li>
            <li id="product_cat-52">
                <input class="wcv_category_check" value="52" type="checkbox" name="product_cat[]" id="in-product_cat-52" data-parsley-multiple="product_cat"> 
                <label class="selectit" for="in-product_cat-52">Bath &amp; Beauty</label>
            </li>
            <li id="product_cat-46">
                <input class="wcv_category_check" value="46" type="checkbox" name="product_cat[]" id="in-product_cat-46" data-parsley-multiple="product_cat"> 
                <label class="selectit" for="in-product_cat-46">Clothing &amp; Shoes</label>
            </li>
        </ul>
    </li>
</ul>

Answer 1

您需要在页面加载时隐藏子项 ul，并使用以下代码根据复选框的状态显示它们：

$('li > input[type=checkbox]').on('change', function() {
  var $this = $(this),
    $ul = $this.parent().find('> ul');

  if ($this.is(':checked')) $ul.show();
  else $ul.hide();
});

要隐藏 ul，请使用此 CSS 代码：

ul.children{
  display: none;
}

Working example

单击复选框时显示/隐藏一个 li children

Show / Hide children of an li when checkbox is clicked

checkbox

jquery

show

hide