jQuery下拉菜单经典案例
源码：
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/jquery-3.4.1.js"></script>
</head>
<body>
<style>
* {
padding: 0px;
margin: 0px;
}
ul {
list-style: none;
padding: 0px;
width: 120px;
}
#d,
#ul {
border: 1px solid gray;
float: left;
}
li:hover {
background-color: gray;
}
</style>
<div onmouseover="show()" onmouseout="hide()" id="d"><b>血型</b></div>
<div style="clear: both;"></div>
<ul id="ul" style="display: none;" onmouseover="show()" onmouseout="hide()">
<li onclick="ch(this)">A</li>
<li onclick="ch(this)">B</li>
<li onclick="ch(this)">AB</li>
<li onclick="ch(this)">O</li>
<li onclick="ch(this)">H </li>
<li onclick="ch(this)">H-</li>
</ul>
<div style="clear: both;"></div>
<hr/>
<span id="showInfo"></span>
<script>
function ch(o) {
console.log(o.innerHTML);
$("#showInfo").text(o.innerHTML);
}
function show() {
$("#ul").show();
}
function hide() {
$("#ul").hide();
}
</script>
</body>
</html>希望能对大家有所帮助。
