这是代码:
<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
<li>Element 1</li>
<li>Element 2<button id="button">Button Text</button>
<div id="infodiv" style="display:none;">
<ul>
<li>Element 3</li>
<li>Element 4.</li>
<li>Element 5</li>
</ul>
</div>
</li>
</ul>
欢迎任何线索。
谢了。
这里有一个方法来做你想做的事情:
<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
<li>Element 1</li>
<li>Element 2<button id="button">Button Text</button></li>
<div id="infodiv" class="list-group-item" style="display:none;">
<li>Element 3</li>
<li>Element 4.</li>
<li>Element 5</li>
</div>
</ul>
JavaScript:
$('#button').on('click',function(i, el){
if($('#infodiv').is(':visible')){
$('#infodiv').hide();
}else{
$('#infodiv').show();
}
});
参见JsFiddle
我们所做的是显示或隐藏您的#Infodiv，这取决于它当前是否可见。 我们还更改了您的html，删除子列表中的，使列表中没有另一个项目符号列表。
您的项目显示为子列表，因为您在顶部列表中有一个ul元素。 如果希望所有列表项显示为单个列表，则删除2ul，如下所示:
<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
<li>Element 1</li>
<li>Element 2<button id="button">Button Text</button></li>
<li class="showhide">Element 3</li>
<li class="showhide">Element 4.</li>
<li class="showhide">Element 5</li>
</li>
</ul>
另外，将一些li包装在div中在语义上也不是很好。 最后，您需要为按钮提供一个onclick事件处理程序（我假设您没有使用任何前端框架，只是使用普通的Javascript）:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<strong><span style="font-weight: bolder;">Level 1</span></strong><br />
My list:
<ul>
<li>Element 1</li>
<li>Element 2<button id="button">Button Text</button></li>
<li class="showhide">Element 3</li>
<li class="showhide">Element 4.</li>
<li class="showhide">Element 5</li>
</li>
</ul>
<script>
document.querySelector("button").onclick = function(event) {
const lis = document.getElementsByClassName('showhide')
for (const li of lis) {
li.style.display = li.style.display === 'none' ? 'block' : 'none'
}
}
</script>
</body>
</html>
