【无标题】jQuery二级菜单的显示案例

最新推荐文章于 2022-05-18 18:46:25 发布
最新推荐文章于 2022-05-18 18:46:25 发布
阅读量134 收藏
点赞数
文章标签： jquery javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52148658/article/details/124816660
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>导航栏作业</title>

    <style>

        *{margin: 0;padding: 0;border: 0;list-style: none;}

        ul{width: 340px;height: 30px;background: url(./images/bg.jpg) no-repeat;margin: 100px auto;}

        ul>li{margin-left: 10px;float: left;}

        span, ol li{background: url(./images/libg.jpg) no-repeat;width: 100px;height: 30px;display: block;text-align: center;line-height: 30px;cursor: pointer;}

        ol{display: none;}

    </style>

</head>

<body>

    <ul>

        <li>

            <span>一级菜单</span>

            <ol>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

            </ol>

        </li>

        <li>

            <span>一级菜单</span>

            <ol>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

            </ol>

        </li>

        <li>

            <span>一级菜单</span>

            <ol>

                <li>二级菜单</li>

                <li>二级菜单</li>

                <li>二级菜单</li>

            </ol>

        </li>

    </ul>

    <script src="./js/jquery-1.12.4.min.js"></script>

    <script>

        $("ul>li").hover(function(){

            // ol的移入显示移出隐藏

            // $(this).children("ol").toggle();

            $(this).children("ol").stop().slideToggle();

        })

    </script>

</body>

</html>

weixin_52148658
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JQuery.HoverDir库实现侧边栏二级菜单
二手农民的学习博客
05-05 1175
Jquery.hoverDir响应鼠标移动方向的悬停效果插件 HTML代码 技术 Java PHP
嵌套ul li 实现简单的二级菜单
01-07
通过嵌套的ul li 实现简单的二级菜单示例代码如下，感兴趣的朋友可以参考下，希望对大家有所帮助
Jquery二级菜单的显示
ljh_learn_from_base的博客
05-31 1170
page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%> DOCTYPE html> head> title>二级菜单练习title> script type="text/javascript" src="/AAA/js/jquery-1.8.3.js"
三种方式实现网页二级菜单
热门推荐
Bazingaea的博客
11-28 6万+
方法一：使用HTML和CSS实现   首先是Html代码，习惯上会将菜单放在一个div里，使用盒子模型，方便以后的操作和设置样式。 二级菜单也就是在一级菜单中的li中再添加一个ul-li结构   &lt;div class="test"&gt; &lt;ul&gt; &lt;li&gt;A&lt;/li&gt; &lt;li&gt;B&lt..
jQuery带下划线滑动二级菜单代码
04-02
3. **jQuery事件监听**：使用jQuery的`hover`方法监听鼠标进入（mouseenter）和离开（mouseleave）事件，触发相应的显示和隐藏二级菜单的函数。 4. **jQuery DOM操作**：通过`.show()`和`.hide()`方法控制二级菜单的...
jquery左侧固定悬浮二级菜单
04-02
"jQuery左侧固定悬浮二级菜单"是一种高效且用户友好的导航解决方案，尤其适用于内容丰富的网站，如电子商务平台、企业官网等。这个菜单设计允许主菜单固定在左侧，二级菜单则根据用户的滚动动态显示，提供无缝的浏览...
jQuery下拉二级菜单导航带图片
11-19
在这个案例中，我们将深入探讨如何使用jQuery创建一个带有图片的下拉二级菜单导航。 首先，我们需要理解基本的HTML结构。一个典型的二级菜单通常由一级菜单项和对应的二级子菜单组成。一级菜单通常包含多个`<li>`...
jquery实现像栅栏一样左右滑出式二级菜单效果代码
10-23
为了实现本文所提到的左右滑出式二级菜单，我们需要使用jquery的选择器、事件绑定、动画效果等功能。 具体到本文中，首先提到了jquery鼠标click点击事件的使用。在jquery中，可以通过.bind()或.on()方法来绑定点击...
jQuery鼠标经过二级菜单下拉代码.zip
07-04
在这个案例中，jQuery被用来监听鼠标事件，当鼠标指针悬停在一级菜单项上时，触发二级菜单的显示。jQuery的选择器功能使得我们能够轻松地找到页面上的特定元素，如一级菜单和二级菜单项，然后绑定事件监听器。 CSS3...
二级菜单的移入移出效果(jQuery)
qq_44902892的博客
05-18 716
非父子关系或非兄弟关系的元素实现移入显示二级菜单，移出二级菜单恢复原样。 /*参数说明： hoverFrom 触发控件 hoverLayer 二级菜单元素 showDelay 延迟时长 */ function (hoverFrom, hoverLayer, showDelay) { var hover$ = $(hoverLayer); //接收触发控件 var timeout; //定义变量接收移出定时器 var showTimeout; //
一级菜单hover进入二级菜单，二级菜单不消失
qq_34485818的博客
05-28 1万+
在写分级菜单时遇到问题：      设置一级菜单：hover效果显示二级菜单时，当鼠标从一级菜单移入二级菜单时，一级菜单因失去鼠标而导致二级菜单消失       根据一二级菜单DOM关系提出不同思路：               一级菜单包裹二级菜单                   一级菜单 二级菜单
jQuery实现二级侧边导航菜单
ovocc的博客
03-21 1807
案例向
JQuery中鼠标划过一级菜单，有二级菜单的就显示的处理
chaplinlong的博客
04-16 1万+
重点是逻辑，理解了就好了。先直接上html5代码：<!doctype html> <html> <head> <meta charset="utf-8"> <title>鼠标划过一级菜单，有二级菜单的就显示</title> <script src="../js/jquery-2.2.3.js"></script> <script> $(function() { $("li:h
ul、li制作二级下拉菜单
wangzhongquan_的专栏
03-26 3587
ul、li制作二级下拉菜单 <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> css菜单演示 <!-- *{margin:0;padding:0;border:0;}
php实现鼠标悬停显示下拉菜单,jquery实现鼠标滑过显示二级下拉菜单效果
weixin_33977572的博客
03-12 656
本文实例讲述了jquery实现鼠标滑过显示二级下拉菜单效果。分享给大家供大家参考。具体如下：这是一款jquery实现的下拉菜单，当鼠标移在主菜单上的时候，向下滑出二级子菜单，采用UL LI结构，便于修改完善，我觉得是很实用的菜单，希望大家平时能用得上。运行效果截图如下：在线演示地址如下：具体代码如下：jquery下拉菜单* { margin: 0; padding: 0; }body {font-...
UL LI结构实现二级导航菜单(HTML+CSS+JS)
yan_dk的专栏
09-21 5079
http://blog.digitalforest.cn/cssdivulli-nav 1.    创建无序列表：             菜单例一         菜单例二         菜单例三         菜单例四         菜单例五         菜单例六     【点击这里查看效果】 2.    将“li”默认样式“圆点
jq ajax写二级导航,jQuery实现二级导航菜单的示例
weixin_32955455的博客
08-06 1067
实用JQ实现导航二级菜单效果，导航菜单在网站中非常常见，有的网站可能会出现三级菜单及多级菜单模式，下面我们来简单的实现一个二级菜单的效果。部分效果截图：整体代码：导航菜单案例*{padding: 0;margin: 0;}ul,li{list-style: none;}a{text-decoration: none;}nav{width: 1140px;height: 40px;margin: 0...
php+jQuery实现三级导航栏下拉菜单详细教程
例如，当用户鼠标悬停在一级菜单上时，通过jQuery的`.hover()`方法显示对应的二级菜单；进一步地，当用户悬停在二级菜单上时，显示三级菜单。此外，还可以使用`.hide()`和`.show()`方法来控制菜单的可见性，以实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值