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

how to hide ul li with specific class on page load by default before toggle click function apply

本文关键字:隐藏 加载 ul-li 默认 应用 功能 情况下      更新时间:2023-09-26

我有一个切换树,它在点击时做出响应,即显示或隐藏UL>li。我想把所有有父母的UL-->李都藏起来。为了让它更明显,我将css背景色应用于红色,我希望在页面加载时用它隐藏,但在单击返回时显示。

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>

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

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

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