jQuery下拉菜单经典案例

简介: jQuery下拉菜单经典案例

jQuery下拉菜单经典案例

0.gif


源码:

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

希望能对大家有所帮助。


相关文章
|
2月前
|
JavaScript
jquery动画与事件案例
jquery动画与事件案例
|
24天前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
17 0
|
2月前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
27 0
|
2月前
|
XML 前端开发 JavaScript
jQuery与javascript的区别+案例 锋芒毕露
jQuery与javascript的区别+案例 锋芒毕露
|
2月前
|
JavaScript
jQuery选择器案例之——index.html
jQuery选择器案例之——index.html
|
2月前
|
JavaScript
jQuery选择器案例之——index.js
jQuery选择器案例之——index.js
|
2月前
|
JavaScript
jQuery操作DOM元素案例
jQuery操作DOM元素案例
|
2月前
|
JavaScript
jquery选择器案例分享
jquery选择器案例分享
|
2月前
|
JavaScript
初识jQuery的案例
初识jQuery的案例
|
2月前
|
JavaScript 前端开发
jquery实现二级导航下拉菜单效果实例
jquery实现二级导航下拉菜单效果实例
50 0