HTML中折叠展开的实现。

HTML中折叠展开的实现。,第1张

<!DOCTYPE HTML>

<html>

<body>

<details>

<summary>Copyright 2011.</summary>

<p>All pages and graphics on this web site are the property of W3School.</p>

</details>

</body>

</html>

<!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>

<title>竖向的折叠菜单</title>

<script language = JavaScript>

function showmenu(id) {

var list = document.getElementById("list"+id)

var menu = document.getElementById("menu"+id)

if (list.style.display=="none") {

document.getElementById("list"+id).style.display="block"

menu.className = "title1"

}else {

document.getElementById("list"+id).style.display="none"

menu.className = "title"

}

}

</script>

<style type="text/css">

<!--

*{margin:0padding:0list-style:nonefont-size:14px}

#nav{margin:10pxtext-align:centerline-height:25pxwidth:200px}

.title{background:#336699color:#fffborder-bottom:1px solid #fffcursor:pointer}

.title1{background:#888color:#000border-bottom:1px solid #666cursor:pointer}

.content li{color:#336699background:#dddborder-bottom:1px solid #fff}

-->

</style>

</head>

<body>

<div id="nav">

<div class="title" id="menu1" onclick="showmenu('1') ">网站制作</div>

<div id="list1" class="content" style="display:none">

<ul>

<li>div+css</li>

<li>网站设计</li>

<li>网站切图</li>

</ul>

</div>

<div class="title" id="menu2" onclick="showmenu('2')">网页代码</div>

<div id="list2" class="content" style="display:none">

<ul>

<li>菜单导航</li>

<li>层和布局</li>

<li>图片切换</li>

</ul>

</div>

</div>

</body>

</html>

看是你想要的吗?


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7647377.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-08
下一篇 2023-04-08

发表评论

登录后才能评论

评论列表(0条)

保存