提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

jQuery下拉菜单经典案例

jQuery案例经典 下拉菜单
2023-09-14 09:05:03 时间

jQuery下拉菜单经典案例

 源码：

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

希望能对大家有所帮助。

相关文章