js滑动弹出，改为点击弹出

答案:2 悬赏:30 手机版

解决时间 2021-03-05 13:41

提问者网友：王者佥
2021-03-04 13:26

这段代码是鼠标滑过，会弹出下来菜单，我想把它修改成鼠标点击才会弹出。麻烦懂JS的高手帮帮忙啊，谢谢。

<style type="text/css">
#wrapper{float:left; width:130px;height:30px; border:1px solid #e3e3e3; }
#nav{ background-color:#fff;}
#nav ul{ margin:0 auto; padding:0; width:130px;list-style:none;background-color:#fff; height:25px;}
#nav ul li{ float:left; position:relative;}
#nav ul li a{ position:absolute;z-index:9999;width:100px; padding:0px 0px 0px 20px ;line-height:25px; display:block; background-color:#fff; ; text-decoration:none; border-left:1px solid #fff;}
#nav ul li a:hover{ background-color:#7DD1CF; color:#fff;}
#nav ul li span{ display:none; padding-bottom:1px; position:absolute; left:0; top:25px; background-color:#7DD1CF;}
</style>
<script language="JavaScript" type="text/JavaScript">
function showElement(elementId)
{
document.getElementById(elementId).style.display="block";
}
function hideElement(elementId)
{
document.getElementById(elementId).style.display="none";
}
</script>
<div id="wrapper">
<div id="nav">
<ul>
<li onMouseOver="showElement('menu3')" onMouseOut="hideElement

('menu3')"><a href="#">标题</a>
<span id="menu3">
<a href="#">计算机专业</a>
<a href="#">计算机专业</a>
<a href="#">计算机专业</a>
<a href="#">计算机专业</a>
<a href="#">计算机专业</a>
<a href="#">计算机专业</a>
</span>
</li>
</ui>
</div>
</div>

</div>

最佳答案

五星知识达人网友：酒醒三更
2021-03-04 14:18

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>JS</title>
<STYLE>
#wrapper {
float: left;
width: 130px;
height: 30px;
border: 1px solid #e3e3e3;
}

#nav {
background-color: #fff;
}

#nav ul {
margin: 0 auto;
padding: 0;
width: 130px;
list-style: none;
background-color: #fff;
height: 25px;
}

#nav ul li {
float: left;
position: relative;
}

#nav ul li a {
position: absolute;
z-index: 9999;
width: 100px;
padding: 0px 0px 0px 20px;
line-height: 25px;
display: block;
background-color: #fff;;
text-decoration: none;
border-left: 1px solid #fff;
}

#nav ul li a:hover {
background-color: #7DD1CF;
color: #fff;
}

#nav ul li span {
display: none;
padding-bottom: 1px;
position: absolute;
left: 0;
top: 25px;
background-color: #7DD1CF;
}
</STYLE>
<script type="text/javascript">
function showElement (elementId)
    {
    var elem = document.getElementById (elementId);
    if (!elem.style.display || elem.style.display == 'none')
    {
    elem.style.display = "block";
    }
    else
    {
     elem.style.display = "none";
    }
    }
</script>
</head>
<body>
<div id="wrapper">
<div id="nav">
<ul>
<li onclick="showElement('menu3')"><a href="#">标题</a> <span
id="menu3"> <a href="#">计算机专业</a> <a href="#">计算机专业</a> <a
href="#">计算机专业</a> <a href="#">计算机专业</a> <a href="#">计算机专业</a> <a
href="#">计算机专业</a> </span></li>
</ul>
</div>
</div>

</div>
</body>
</html>

全部回答

1楼网友：迷人又混蛋
2021-03-04 15:40

window.open("page.html", "newwindow", "height=100, width=400, top=0,left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no") //写成一行 document.writeln("

我要举报

如以上回答内容为低俗、色情、不良、暴力、侵权、涉及违法等信息，可以点下面链接进行举报！

点此我要举报以上问答信息