jq点击显示隐藏下拉菜单

最新推荐文章于 2024-05-12 03:36:33 发布

xcj888it

最新推荐文章于 2024-05-12 03:36:33 发布

阅读量5.4k

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/xcj888it/article/details/81607899

版权

这篇博客展示了如何使用jQuery实现导航菜单中点击列表项时显示或隐藏子级下拉菜单的功能。通过CSS隐藏初始下拉菜单，然后用jQuery监听点击事件，动态改变子菜单的显示状态。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toggle</title>
    <script src="js/jquery-3.1.0.min.js"></script>
    <style>
        *{margin: 0;padding: 0}
        .nav1>li>ul{
            display: none}
        .nav1>li{color: red}
        .nav1>li>ul>li{color: black!important;}
    </style>
</head>
<body>
<ul class="nav1">
    <li>aaaaa
        <ul>
            <li>aa22</li>
            <li>aa22</li>
            <li>aa22</li>
            <li>aa22</li>
        </ul>
    </li>
    <li>bbbbb
        <ul>
            <li>bb22</li>
            <li>bb22</li>
            <li>bb22</li>
            <li>bb22</li>
        </ul>
    </li>
    <li>cccc
        <ul>

最低0.47元/天解锁文章

xcj888it

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
jq点击显示隐藏下拉菜单

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;toggle&lt;/title&gt; &lt;script src="js/jquery-3.1.0.min.js"&
复制链接

扫一扫