我已经切换了响应点击的树,即显示或隐藏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>
<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>
答案 0 :(得分:1)
如果我理解你的问题,这就是你想要的:
$(".treeview").find('ul').hide()
将它放在$(document).ready函数中,它会在页面加载时隐藏基础无序列表。