jQuery实现下拉菜单(点击显示/隐藏)

已于 2022-10-11 11:26:03 修改
阅读量1.7k 收藏 6
点赞数
分类专栏： jQuery 文章标签： html5 css firefox jquery
于 2022-10-11 10:49:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63823390/article/details/127259149
版权 
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>jQuery实现下拉菜单(点击显示/隐藏)</title>
        <link rel="stylesheet" href="css/index.css">
        <style>
            .item {
                height: auto;
                width: 100px;
                border: 1px solid black;
                cursor: pointer;
                color: #000;
            }
            
            ul[class^='in_menu']{
                display: none;
            }
            
            .in_items {
                background-color: #cecece;
                border-top: 1px solid black;
                /* 文字样式 */
                padding-left: 8px;
                cursor: pointer;
            }
            
        </style>
    </head>
    <body>

        <ul>
            <li class="item">
                <span>点击展开</span>
                <ul class="in_menu-1"><!-- 每个隐藏菜单class不能完全相同,此处递增 -->
                    <li class="in_items">内容文字</li>
                    <li class="in_items">内容文字</li>
                    <li class="in_items">内容文字</li>
                </ul>
            </li>
            <li class="item">
                <span>点击展开</span>
                <ul class="in_menu-2"><!-- 每个隐藏菜单class不能完全相同,此处递增 -->
                    <li class="in_items">内容文字</li>
                    <li class="in_items">内容文字</li>
                    <li class="in_items">内容文字</li>
                </ul>
            </li>
            <li class="item">
                <span>点击展开</span>
                <ul class="in_menu-3"><!-- 每个隐藏菜单class不能完全相同,此处递增 -->
                    <li class="in_items">内容文字</li>
                    <li class="in_items">内容文字</li>
                    <li class="in_items">内容文字</li>
                </ul>
            </li>
        </ul>

    </body>

</html>

<!-- 引入jQuery库 -->
<script src="js/jquery-3.6.1.js"></script><!-- 本地位置 -->
<script src="http://code.jquery.com/jquery-latest.js"></script><!-- 网络位置 -->

<script>
    
    $(".item").on("click", function() {
        const a = $("." + this.children[1].className); //获取元素 ul[class^='in_menu']
        // 显示/隐藏方法
        a.toggle(150);
    });
    
    $(".in_items").on("click", function() {
        //阻止显示方法冒泡
        event.stopPropagation();
    });
    
</script>
纸皮核桃针不戳
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现的点击显示隐藏下拉菜单功能完整示例
10-16
主要介绍了jQuery实现的点击显示隐藏下拉菜单功能,结合完整实例形式分析了jQuery事件响应及页面元素属性动态操作简单实现技巧,需要的朋友可以参考下
jQuery点击页面其他部分隐藏下拉菜单功能
12-29
一、开发小要点     web页面中，我们一般不用select、option来实现下拉菜单效果，因为下拉框的样式丑且难以美化，所以我们选择控制ul显示隐藏来实现同样且高大上的效果，但是不能像下拉框那样点击页面其他部分，下拉菜单收起或隐藏，该怎么办呢？只能用js这老大哥来控制了。 二、代码     HTML： <div class=select_box id=selected> <div class=select> <span>请选择</span> </div> <ul class=list> <li>01</li> <li>02</li>
jQuery学习：显示隐藏 一级菜单
weixin_47295886的博客
11-16 270
点击菜单 进行动画显示。
分别用html/css、javascript、jQuery实现下拉菜单的显示和隐藏
HuLuWa1997的博客
11-21 4254
一、html/css实现下拉菜单的显示和隐藏 简单来说就是通过对css样式的控制来实现下拉菜单的显示和隐藏 具体代码示例如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...
jquery+css实现点击下拉菜单
weixin_42670523的博客
07-31 6147
代码如下：  &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt; &lt;script src="http://code.jquery.com/jquery-latest.j
jquery点击经过显示下拉菜单
02-15
jquery制作的鼠标经过或者点击显示下拉菜单
jQuery实现菜单的隐藏和显示
weixin_30455661的博客
07-30 1334
首先我们先制作好菜单的大致框架，然后再利用jQuery对菜单的隐藏和显示属性进行判断，如果是隐藏的就显示，如果是显示的就隐藏 我们先用一个ul写出大概的框架 ul>li*4这是一个简便的写法按tab键就可以实现如下的效果 <ul> <li></li> ...
jQuery点击弹出下拉菜单
泪光无悔
03-13 7707
导航——点击弹出内容     .navgation{margin:0;padding:0;list-style-type:none;position:relative;} .navgation li {float:left;} .navgation a{padding:3px 6px;background-color:orange;color:white;text-decoration:
jQuery 菜单显示隐藏
林子夕的博客
01-11 392
jQuery 菜单显示隐藏
jQuery+HTML左侧导航栏，点击显示隐藏二级菜单（每日解决一题）
最新发布
qq_53701704的博客
06-20 686
在今天写前端页面时，发现要用二级菜单，通过查找发现这个案例也许可以帮助你解决二级菜单的问题。
JavaScript实现下拉菜单的显示和隐藏
11-26
我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 3)DOM编程：getElementsByTagName()方法。 那么接下来就是我们制作的流程： 1)隐藏二级菜单：设置CSS样式,让二级菜单隐藏。 2)编写显示子菜单showsub()函数：使用getElementsByTagName获取二级菜单项；通过style.display设置二级菜单显示。 3)编写隐藏子菜单hidesub()
jQuery实现菜单的显示和隐藏功能示例
10-18
主要介绍了jQuery实现菜单的显示和隐藏功能,结合实例形式分析了jQuery基于事件响应及css方法动态改变菜单样式的相关操作技巧,需要的朋友可以参考下
JQuery基本操作 JQueryCSS操作 JQuery筛选选择器 JQuery筛选方法 JQuery效果
procul的博客
04-05 286
JQuery 基本使用 原生JS获取的对象就是DOM对象 JQuery方法获取的元素是JQuery对象 (伪数组形式存储) 不能使用原生Js的属性和方法 DOM对象转换为 JQuery 对象 $(DOM对象) JQuery对象转换为DOM对象 $(DOM对象) [index].DOM属性方法 $(DOM对象).get(index).DOM属性方法 JQuer...
jQuery案例（1）（jQuery实现下拉菜单栏）（附：纯css，原生js实现）
weixin_44138076的博客
08-05 772
jQuery实现下拉菜单 解析：给menu的子元素li（一级菜单）注册鼠标悬停事件，然后slideToggle()通过滑动缓慢切换显示与隐藏li的子元素ul（二级菜单） 注：要记得使用stop停止动画，不然操作频繁后就会出现下拉效果延迟 html： <!DOCTYPE html> <html lang="en"> <head> <meta char...
jq自定义下拉菜单，在点击非当前下拉菜单区域时，关闭下拉菜单（点击事件的对象不是目标元素本身）...
weixin_30663471的博客
04-02 337
jq自定义下拉菜单，在点击非当前下拉菜单区域时，关闭下拉菜单（点击事件的对象不是目标元素本身） //点击非当前下拉菜单区域时，关闭下拉菜单 $(document).mousedown(function(e){ var _con = $('.xialacaidan'); //1. 点击事件的对象不是目标元素本身 //2. 事件对象同时也不是目标元素的子元素 ...
JQuery之CSS选择器
林老师带你学编程
07-26 698
1.选择对象 1).基本 ·#id 根据给定的ID匹配一个元素。例如：$("#id") ·element 根据给定的元素名匹配所有元素。例如：$("div") ·.class 根据给定的类匹配元素。例如：$(".style1"); ·* 匹配所有元素。例如：$("*") ·selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回。例如
伪类选择器、伪元素、子元素的伪类。
weixin_44807818的博客
11-11 715
伪类选择器 P：link{}格式 ：Link表示未访问的连接 ：Hover鼠标移入的状态 ：Visited表示已经访问的连接 ：Active超连接被点击的状态 Hover和Active可以对其他标签使用。IE6不支持设置这两个属性。 伪元素 p:first-letter{}格式 ：First-letter为第一个字符设置特殊样式。 ：first-line为第一行字符设置特殊样式。 Before表示元素的最前面的部分 一般结合content使用，通过content向before/after添加内容， Afte
Jquery点击事件隐藏显示菜单
weixin_33854644的博客
09-08 359
显示的效果就是这样，点击菜单，显示自己菜单下的内容，其他菜单下的都隐藏 html代码如下 1 <div> 2 <ul class="menu"> 3 <li class="leav"> 4 <a href="#">衬衫</a> 5 <ul class...
用jquery实现下拉菜单
05-13
可以通过以下步骤使用 jQuery 实现下拉菜单： 1. HTML 结构：在 HTML 中创建一个按钮和一个下拉框，下拉框中包含需要显示的选项。 ```html <button id="dropdown-btn">下拉菜单</button> <div id="dropdown-list"> <a href="#">选项1</a> <a href="#">选项2</a> <a href="#">选项3</a> </div> ``` 2. CSS 样式：使用 CSS 样式隐藏下拉框，并设置按钮样式。 ```css #dropdown-list { display: none; } #dropdown-btn { background-color: #ddd; border: none; color: #333; padding: 10px; cursor: pointer; } ``` 3. JavaScript 代码：使用 jQuery 代码控制下拉框的显示和隐藏，并在选择选项后更新按钮文本。 ```javascript $(document).ready(function() { // 点击按钮显示下拉框 $("#dropdown-btn").click(function() { $("#dropdown-list").slideToggle(); }); // 选择选项后更新按钮文本 $("#dropdown-list a").click(function() { var text = $(this).text(); $("#dropdown-btn").text(text); $("#dropdown-list").slideUp(); }); }); ``` 以上代码实现了一个简单的下拉菜单，点击按钮时会显示下拉框，选择选项后会更新按钮文本。你可以根据需要进行修改和调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值