javascript - 如果在加载时检查子元素，如何取消隐藏折叠的父列表元素？

Question

我有一个由数据库生成的动态多级列表。在加载时，它会隐藏除第一级元素之外的所有元素。如果选中其中一个子元素，我希望它在加载时取消隐藏任何父项。我已经得到它来取消隐藏直接父母，但不是主要父母。

我的列表是这样设置的：

<div class="form-row" id="existing-products">
    <label class="form_label">Choose products</label>
    <ul class="product-tree">
        <li>Main Product 1
            <ul>
                <li class="productList">Sub Product 1
                    <ul>
                        <li class="product"><input type="checkbox" name="prodCode[]" id="prodCodes" class="form_input" value="main1_sub1" checked />main1_sub1</li>
                    </ul>
                </li>
                <li class="productList">Sub Product 2
                    <ul>
                        <li class="product"><input type="checkbox" name="prodCode[]" id="prodCodes" class="form_input" value="main1_sub2"  />main1_sub2</li>
                    </ul>
                </li>
            </ul>
        </li>               
        <li>Main Product 2      
            <ul>
                <li class="productList">Sub Product 1
                    <ul>
                        <li class="product"><input type="checkbox" name="prodCode[]" id="prodCodes" class="form_input" value="main2_sub1"  />main2_sub1</li>
                    </ul>
                </li>
            </ul>
        </li>               
    </ul>
</div>

我切换列表的脚本是：

<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
    var plus = $('<span> + </span>').addClass('plus');
    $('.product-tree li').has('ul').addClass('has-child')
    plus.prependTo('.has-child');
    $(".has-child").hover(
        function () {
            $(this).addClass('hover');
        },
        function () {
            $(this).removeClass('hover');
        }
    );
    $('.has-child ul').hide();
    $('.product-tree input:checked').each(function(){
        $(this).parent().show(); // Does nothing?
        $(this).parent().parent().show(); // Will show Sub Product 1 when Main product 1 is clicked
        $(this).parent().parent().parent().show(); // Does nothing
    });

    $('.has-child .plus').click(function(){
        $(this).parent().children("ul").toggle('slow');
    });

});
</script>

Answer 1

改变这个：

$('.product-tree input:checked').each(function(){
    $(this).parent().show(); // Does nothing?
    $(this).parent().parent().show(); // Will show Sub Product 1 when Main product 1 is clicked
    $(this).parent().parent().parent().show(); // Does nothing
});

至：

$('.product-tree input:checked').each(function(){
    $(this).parents().show(); // show all parent elements
});

Answer 2

这行得通吗？

if($('.product-tree').find('input').is(':checked')) {
     $(this).parents().show();
}