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

时间:2015-03-23 08:12:24

标签: javascript jquery css html5 treeview

我已经切换了响应点击的树,即显示或隐藏UL> li。我想要隐藏所有的UL - >谁有父母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>

1 个答案:

答案 0 :(得分:1)

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

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

将它放在$(document).ready函数中,它会在页面加载时隐藏基础无序列表。