如何使用 javascript 隐藏子元素
2017-11-21
1133
我已经完成了显示主要元素的 javascript 代码，如果我单击主要元素，则所有子元素都会出现，但是在我的代码中不起作用。
$(function() {
//alert("hello");
$(".chlnode").parent().hide();
$(".mainnode").click(function() {
alert("mainnode is clicking");
$(this).children('ul').show();
$(this).siblings().find('ul').hide();
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul>
<li class='mainnode'>A</li>
<ul>
<li class='chlnode'>A1</li>
<ul>
<li class='chlnode'>A3</li>
</ul>
<ul></ul>
<li class='chlnode'>A2</li>
<ul>
<li class='chlnode'>A4</li>
</ul>
<ul>
<ul>
<li class='chlnode'>A5</li>
</ul>
<ul></ul>
</ul>
</ul>
<li class='mainnode'>B</li>
<ul>
<li class='chlnode'>B1</li>
<li class='chlnode'>B2</li>
<ul>
<li class='chlnode'>B3</li>
</ul>
<ul>
<ul>
<li class='chlnode'>B4</li>
</ul>
<ul></ul>
</ul>
</ul>
<li class='mainnode'>C</li>
<ul>
<li class='chlnode'>C1</li>
<ul>
<li class='chlnode'>C2</li>
</ul>
<ul>
<ul>
<li class='chlnode'>C3</li>
</ul>
<ul>
<ul>
<li class='chlnode'>C4</li>
</ul>
<ul>
<ul>
<li class='chlnode'>C5</li>
</ul>
</ul>
</ul>
</ul>
</ul>
<li class='mainnode'>D</li>
<ul>
<li class='chlnode'>D1</li>
<ul>
<li class='chlnode'>D4</li>
</ul>
<ul></ul>
<li class='chlnode'>D3</li>
<ul>
<li class='chlnode'>D5</li>
</ul>
<ul>
<ul>
<li class='chlnode'>D6</li>
</ul>
<ul>
<ul>
<li class='chlnode'>D7</li>
</ul>
<ul></ul>
</ul>
</ul>
</ul>
<li class='mainnode'>E</li>
<ul>
<li class='chlnode'>E1</li>
</ul>
<li class='mainnode'>F</li>
<ul>
<li class='chlnode'>F1</li>
</ul>
<li class='mainnode'>G</li>
<ul>
<li class='chlnode'>J</li>
<ul>
<li class='chlnode'>J1</li>
</ul>
<ul></ul>
</ul>
</ul>3个回答
尝试使用以下代码。
$(function() {
//alert("hello");
$(".chlnode").parent().hide();
$(".mainnode").click(function() {
alert("mainnode is clicking");
$(".mainnode ~ ul").hide();
$(this).next('ul').show();
});
});
我已将其更改为
$(".mainnode ~ ul").hide();
将在显示与所点击的 li 相对应的 ul 之前隐藏所有 ul。
由于您的
li
没有子元素，只有兄弟元素，因此您可以使用
.next()
或
.siblings()
，如下所示
$(".mainnode ~ ul").hide();
演示
$(function() {
//alert("hello");
$(".chlnode").parent().hide();
$(".mainnode").click(function() {
alert("mainnode is clicking");
$(".mainnode ~ ul").hide();
$(this).next('ul').show();
});
});This is my html code i am generating php file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul>
<li class='mainnode'>A</li>
<ul>
<li class='chlnode'>A1</li>
<ul>
<li class='chlnode'>A3</li>
</ul>
<ul></ul>
<li class='chlnode'>A2</li>
<ul>
<li class='chlnode'>A4</li>
</ul>
<ul>
<ul>
<li class='chlnode'>A5</li>
</ul>
<ul></ul>
</ul>
</ul>
<li class='mainnode'>B</li>
<ul>
<li class='chlnode'>B1</li>
<li class='chlnode'>B2</li>
<ul>
<li class='chlnode'>B3</li>
</ul>
<ul>
<ul>
<li class='chlnode'>B4</li>
</ul>
<ul></ul>
</ul>
</ul>
<li class='mainnode'>C</li>
<ul>
<li class='chlnode'>C1</li>
<ul>
<li class='chlnode'>C2</li>
</ul>
<ul>
<ul>
<li class='chlnode'>C3</li>
</ul>
<ul>
<ul>
<li class='chlnode'>C4</li>
</ul>
<ul>
<ul>
<li class='chlnode'>C5</li>
</ul>
</ul>
</ul>
</ul>
</ul>
<li class='mainnode'>D</li>
<ul>
<li class='chlnode'>D1</li>
<ul>
<li class='chlnode'>D4</li>
</ul>
<ul></ul>
<li class='chlnode'>D3</li>
<ul>
<li class='chlnode'>D5</li>
</ul>
<ul>
<ul>
<li class='chlnode'>D6</li>
</ul>
<ul>
<ul>
<li class='chlnode'>D7</li>
</ul>
<ul></ul>
</ul>
</ul>
</ul>
<li class='mainnode'>E</li>
<ul>
<li class='chlnode'>E1</li>
</ul>
<li class='mainnode'>F</li>
<ul>
<li class='chlnode'>F1</li>
</ul>
<li class='mainnode'>G</li>
<ul>
<li class='chlnode'>J</li>
<ul>
<li class='chlnode'>J1</li>
</ul>
<ul></ul>
</ul>
</ul>Carsten Løvbo Andersen
2017-11-21
您必须先修复
html
代码，然后尝试如下操作：
$(function() {
$(".mainnode").click(function() {
$(this).children('ul').show();
$(this).siblings('li').find('ul').hide();
});
});li > ul {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<ul>
<li class='mainnode'>A
<ul>
<li class='chlnode'>A1</li>
</ul>
</li>
<li class='mainnode'>B
<ul>
<li class='chlnode'>B1</li>
<li class='chlnode'>B2</li>
</ul>
</li>
</ul>子级应始终位于父级内：
<ul>
<li>
<ul><ul>
</li>
</ul>
Pedram
2017-11-21
你的 html 代码应如下所示
<ul>
<li class='mainnode'>A
<ul>
<li class='chlnode'>A1</li>
<ul>
<li class='chlnode'>A3</li>
</ul>
<ul></ul>
<li class='chlnode'>A2</li>
<ul>
<li class='chlnode'>A4</li>
</ul>
<ul>
<ul>
<li class='chlnode'>A5</li>
</ul>
<ul></ul>
</ul>
</ul>
</li>
<li class='mainnode'>B
<ul>
<li class='chlnode'>B1</li>
<li class='chlnode'>B2</li>
<ul>
<li class='chlnode'>B3</li>
</ul>
<ul>
<ul>
<li class='chlnode'>B4</li>
</ul>
<ul></ul>
</ul>
</ul>
</li>
<li class='mainnode'>C
<ul>
<li class='chlnode'>C1</li>
<ul>
<li class='chlnode'>C2</li>
</ul>
<ul>
<ul>
<li class='chlnode'>C3</li>
</ul>
<ul>
<ul>
<li class='chlnode'>C4</li>
</ul>
<ul>
<ul>
<li class='chlnode'>C5</li>
</ul>
</ul>
</ul>
</ul>
</ul>
</li>
<li class='mainnode'>D
<ul>
<li class='chlnode'>D1</li>
<ul>
<li class='chlnode'>D4</li>
</ul>
<ul></ul>
<li class='chlnode'>D3</li>
<ul>
<li class='chlnode'>D5</li>
</ul>
<ul>
<ul>
<li class='chlnode'>D6</li>
</ul>
<ul>
<ul>
<li class='chlnode'>D7</li>
</ul>
<ul></ul>
</ul>
</ul>
</ul>
</li>
<li class='mainnode'>E
<ul>
<li class='chlnode'>E1</li>
</ul>
</li>
<li class='mainnode'>F
<ul>
<li class='chlnode'>F1</li>
</ul>
</li>
<li class='mainnode'>G
<ul>
<li class='chlnode'>J
<ul>
<li class='chlnode'>J1</li>
</ul>
</li>
</ul>
</li>
</ul>
romal tandel
2017-11-21