如何在应用切换点击功能之前,默认情况下在页面加载时隐藏带有特定类的ul-li
how to hide ul li with specific class on page load by default before toggle click function apply
我有一个切换树,它在点击时做出响应,即显示或隐藏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函数中,它会在页面加载时隐藏底层的无序列表。
相关文章:
- Bootstrap在页面加载缓慢时会立即显示隐藏的模式对话框
- 在第一页加载时隐藏字段,而不是在php发布之后
- 隐藏元素直到加载完成(ng斗篷不是我需要的)
- 谷歌地图加载后隐藏加载图像
- AngularJS - 显示/隐藏加载器
- 将调整大小的图像作为下载提供后,隐藏加载的 GIF
- 根据条件从代码隐藏加载html页面
- ajax在没有更多数据的情况下隐藏加载更多按钮
- 在找不到.HTML文件时隐藏加载栏
- 检测javascript完成以显示/隐藏加载图标
- 函数完成后隐藏加载覆盖
- 使用jQuery下载大文件;iFrame -需要一个文件准备事件,所以我可以隐藏加载gif
- 隐藏加载数据,一旦页面已加载
- 显示被点击的元素的隐藏加载器
- Javascript / Jquery:显示和隐藏加载屏幕消息
- 自动隐藏“加载更多”选项卡内的按钮
- Chrome不显示和隐藏加载程序
- 显示和隐藏加载gif的最佳实践
- 如何在d3中隐藏加载图后的加载图像
- 在ajax回调后隐藏加载gif