Question

如何在JS里面来控制ul标签的显示与隐藏？

在页面上我设置这个ul的状态为隐藏 <ul style="display:none" id="ChildMenu1">
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li> </ul> 现在我要在一个按钮的点击事件中，如果这个ul状态为隐藏则让他显示如果为显示状态则隐藏他

Answer 1

需要准备的材料分别有：电脑、html编辑器、浏览器。

1、首先，打开html编辑器，新建html文件，例如：index.html，填写问题基础代码。

2、在index.html中的<script>标签，输入js代码：

function fun() {

if ($('#ChildMenu1').css('display') == 'none') {

$('#ChildMenu1').css('display', 'block');

} else {

$('#ChildMenu1').css('display', 'none');

}

}

3、浏览器运行index.html页面，此时点击按钮即可让菜单显示或隐藏。

Answer 2

$("#按钮的id").click(function(){
    $("#ChildMenu1").toggle();
});

toggle() 方法切换元素的可见状态。

如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素。

Answer 3

<script language="JavaScript">
function show(ChildMenu1){
if (ChildMenu1.style.display == "none") {
ChildMenu1.style.display = "";
button1.value="隐藏"
}else{
ChildMenu1.style.display = "none";
button1.value="显示"
}
}
</script><input type="button" value="显示" id="button1" onclick="show(ChildMenu1)">
<ul style="display:none" id="ChildMenu1">
<li>子菜单</li>
<li>子菜单</li>
<li>子菜单</li>
</ul>试试吧，呵呵~~~~~~~~~~~

Answer 4

<script language="JavaScript">
function show(i){
if (i.style.display == "none") {
i.style.display = "";
}else{
i.style.display = "none";
}
}

Answer 5

window.onload=function(){
var oUl=document.getElementById=("ChildMenu1");//获取要操作的ul
object.onclick=function(){//设置按钮事件
if(oUl.style.display==none){
oUl.style.display==blcok;
}
else{
oUl.style.display==none;
}
}

}