js控制ul的显示隐藏，对象的有效范围

最新推荐文章于 2022-11-16 11:00:26 发布

转载最新推荐文章于 2022-11-16 11:00:26 发布 · 196 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/txxt/p/4626586.html

文章标签：

#xhtml

本文介绍如何使用JavaScript控制嵌套的UL元素显示与隐藏，并讨论了对象的有效作用域。通过具体的HTML示例，展示了如何利用按钮点击事件来切换子菜单的可见性。

js控制ul的显示隐藏，对象的有效范围

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
#innav{position:relative;}
</style>
<script>
    window.onload=function(){
    innav=document.getElementById('innav');
    innav.style.display='none';
    }
    function xs(){
        innav.style.display='block';
        innav.style.left='';
    }
    function yc(){
        innav.style.display='none';
        }
</script>
<body>
<ul id='nav'>
<li>首页</li>
<li>公司简介</li>
<li>产品展示
<ul id='innav'>
<li>one</li>
<li>two</li>
<li>three</li>
<li>four</li>

</ul>
</li>
<li>联系我们</li>
</ul>
<button onclick='xs();'>xs</button>
<button onclick='yc();'>yc</button>
</body>
</html>