首页 > 代码库 > JS 菜单收拉样式
JS 菜单收拉样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//想将getElementById（）方法 改为getElementsByName（），在把<div 中的id 全部换成name> 为什么不能触发点击事件？
function on_Click_1() {
var li_1=document.getElementById("li_1");
var oL_1=document.getElementById("oL_1");
if (oL_1.style.display=="none"){
oL_1.style.display="block";
}else {
oL_1.style.display="none";
}
}
function on_Click_2() {
var li_2=document.getElementById("li_2");
var oL_2=document.getElementById("oL_2");
if (oL_2.style.display=="none"){
oL_2.style.display="block";
}else {
oL_2.style.display="none";
}
}
function on_Click_3() {
var li_3=document.getElementById("li_3");
var oL_3=document.getElementById("oL_3");
if (oL_3.style.display=="none"){
oL_3.style.display="block";
}else {
oL_3.style.display="none";
}
}
function on_Click_4() {
var li_4=document.getElementById("li_4");
var oL_4=document.getElementById("oL_4");
if (oL_4.style.display=="none"){
oL_4.style.display="block";
}else {
oL_4.style.display="none";
}
}
</script>
</head>
<body >
<ul>
<li id="li_1" onclick="on_Click_1()">注册&认证
<ol id="oL_1" style="display: none" >
<li>注册激活</li>
<li>安全登录</li>
<li>支付宝认证</li>
</ol>
</li>
<li id="li_2" onclick="on_Click_2()">买家帮助
<ol id="oL_2" style="display: none">
<li>宝贝搜索，浏览</li>
<li>了解卖家</li>
<li>出价及付款</li>
</ol>
</li>
<li id="li_3" onclick="on_Click_3()">卖家帮助
<ol id="oL_3" style="display: none">
<li>店铺设置管理</li>
<li>商品发布出售&推荐</li>
<li>成交后发货&评价</li>
<li>优惠券和红包</li>
</ol>
</li>
<li id="li_4" onclick="on_Click_4()">个人资料修改
<ol id="oL_4" style="display: none">
<li>我的淘宝功能介绍</li>
<li>修改个人信息</li>
<li>淘宝/支付宝账户绑定</li>
</ol>
</li>
</ul>
</body>
</html>
JS 菜单收拉样式