javascript - 如何在应用切换点击功能之前默认在页面加载时隐藏具有特定类的 ul li

Question

我有切换树，它会在点击时做出响应，即显示或隐藏 UL>li。我想隐藏所有具有父级 ul-li 的 UL --> li。为了使它更明显，我将 css background-color 应用于红色，我希望在页面加载时隐藏它，但在单击返回时显示。

https://jsfiddle.net/toxic_kz/vr84pd6u/

<div>
    <ul class="treeview">
        <li><a>System Administration</a></li>
        <li>
            <a>System Core</a>
            <ul>
                <li><a>f2</a></li>
                <li>
                    <a>f3</a>
                    <ul>
                        <li><a>f4</a></li>
                        <li><a>f5</a></li>
                        <li><a>f6</a></li>
                    </ul>
                </li>
                <li>
                    <a>f7</a>
                    <ul>
                        <li>
                            <a>f8</a>
                            <ul>
                                <li>
                                    <a>f10</a>
                                    <ul>
                                        <li><a>f11</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                        <li><a>f9</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a>MyFunctionA</a>
            <ul>
                <li>
                    <a>f12</a>
                    <ul>
                        <li><a>f13</a></li>
                        <li><a>f14</a></li>
                    </ul>
                </li>
                <li><a>f16</a></li>
            </ul>
        </li>
        <li><a>Course Management</a></li>
    </ul>

  </div>

jQuery

 <script type="text/javascript">

    $(document).ready(function () {

        $('.treeview li').each(function () {
            if ($(this).children('ul').length > 0) {
                $(this).addClass('parent');
            }
        });

        // $('.treeview li.parent>ul li').css('display', 'none');
        $('.treeview li.parent>ul li').css('background-color', 'red');

        $('.treeview li.parent > a').click(function () {
            $(this).parent().toggleClass('active');
            $(this).parent().children('ul').slideToggle('fast');
        });
    });

</script>

Answer 1

如果我正确理解你的问题，这就是你想要的:

$(".treeview").find('ul').hide()

将它放在你的 $(document).ready 函数中，它会在页面加载时隐藏底层的无序列表。