jquery 只有二级下拉菜单

最新推荐文章于 2024-09-17 21:49:02 发布
最新推荐文章于 2024-09-17 21:49:02 发布
阅读量68 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/lin3615/p/3590788.html
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>

html, body, ul, li, h1, h2, h3, h4, h5, h6, fieldset, legend {padding:0; margin:0;}
body {font:12px/normal Verdana, Arial, Helvetica, sans-serif;}
ul li{list-style-type:none;text-transform:capitalize;}

#nav .mainlevel{float:left;margin-right:20px;padding-right:3px;background:#ffff00;width:140px;text-align:center; line-height:22px;}
.linHideStyle{display:none;}

</style>
<script type="text/javascript" src="./jquery/jquery-1.7.1.min.js"></script>
<script>

$(document).ready(function(){
  $('li.mainlevel').mousemove(function(){
  $(this).find('ul').removeClass('linHideStyle').slideDown();//you can give it a speed
  });
  $('li.mainlevel').mouseleave(function(){
  $(this).find('ul').addClass('linHideStyle').slideUp("fast");
  });
});

</script>

<title>jquery下拉竖导航菜单代码</title>
</head>
<body>
<br /><br /><br />
<div id="menu">
    <ul id="nav">

        <li id="mainlevel_01" class="mainlevel">
            <a href="#">第一</a>
            <ul class="linHideStyle">
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
            </ul>
        </li>


        <li id="mainlevel_02" class="mainlevel">
            <a href="#">第二</a>
            <ul class="linHideStyle">
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">3333dd</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
            </ul>
        </li>


        <li id="mainlevel_03" class="mainlevel">
            <a href="#">第三</a>
            <ul class="linHideStyle">
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
            </ul>
        </li>

        <li id="mainlevel_04" class="mainlevel">
            <a href="#">第四季度</a>
            <ul class="linHideStyle">
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
                <li>
                <a href="">the one</a>
                </li>
            </ul>
        </li>

    </ul>
</div>
</body>
</html>

转载于:https://www.cnblogs.com/lin3615/p/3590788.html

bit小兵
关注
jQuery实现二级下拉菜单效果
10-23
### jQuery实现二级下拉菜单的知识点包括： 1. **jQuery基础概念**： - jQuery是一个快速、小型且功能丰富的JavaScript库。它通过提供一种简洁的方法来访问和操作文档对象模型（DOM）。 - jQuery封装了JavaScript...
jquery自定义的下拉菜单
yiyewudao的专栏
03-23 562
<br />因工作需要自己写了个可填，可选，可自定义的日期下拉菜单..样式不太行..勿砸.贴代码... <br /><br /><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <br /> <html> <br />   <head> <br />     <title>select.html</title> <br /><br />     <meta http-equiv="keywords" content=
在jquery中$(document).ready(function(){});和$(function(){})
zhaoqiong0929的博客
07-10 1683
在页面上常会看见&lt;script type="text/javascript"&gt; $(function(){ //添加方法 }) &lt;/script&gt;以上代码中$(function(){})在这里相当于一个函数在开始执行这个函数后才可以执行需要在“添加方法”（eg: load()f方法等等）处添加的方法。如果将上面的代码改成下面这样：&lt;script&gt;...
jquery实现二级导航下拉菜单效果
10-23
本教程将详细介绍如何使用jQuery实现二级导航下拉菜单的效果。 首先，我们需要准备HTML结构。一个基本的二级导航菜单通常包含一个`<ul>`元素作为顶级菜单，其内部的`<li>`元素代表一级菜单项，而每个一级菜单项内再...
基于jQuery实现二级下拉菜单效果
10-22
本文主要探讨了如何利用jQuery来实现二级下拉菜单效果。为了实现这一效果，首先需要理解基本的HTML结构、CSS样式以及jQuery脚本的工作原理。下面将详细介绍每一部分的知识点。 ### HTML结构 在HTML中，我们需要...
jQuery动画二级下拉菜单代码
04-07
本篇将详细介绍如何使用jQuery实现一个具有动画效果的二级下拉菜单。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。...
XHTML简介
qq_48501521的博客
09-11 986
XHTML 指的是可扩展超文本标记语言XHTML 与 HTML 4.01 几乎是相同的XHTML 是更严格更纯净的 HTML 版本XHTML 是以 XML 应用的方式定义的 HTMLXHTML 是 2001 年 1 月发布的 W3C 推荐标准XHTML 得到所有主流浏览器的支持。
【JavaScript】LeetCode：707设计链表
weixin_45980065的博客
09-14 654
【代码】【JavaScript】LeetCode：707设计链表。
vue 案例使用
最新发布
buhuidage的博客
09-17 166
加上show-password就行。el-switch 按键的使用。
使用 uni-app 开发微信小程序的详细指南
2301_79685859的博客
09-16 734
uni-app是一个使用 Vue.js 框架开发跨平台应用的前端框架。开发者通过编写一套代码，可以生成多端应用，包括 H5、iOS、Android、微信小程序、支付宝小程序、字节跳动小程序等。
前端vue3打印，多页打印，不使用插件（工作中让我写一个打印功能）
m0_51798113的博客
09-17 302
getTableData().tableData，其实就是去后端获取参数去了，因为这是公司的前端框架，基于vxe的，包装的方法，获取了一个表格信息，相当于获取参数。说下总体思路，创建一个组件，里面放多个span字段，然后根据父组件传入的参数，生成子组件，最好我们打印子组件的信息即可。这里也很关键，中间我遇到一个问题，那就是经常第一次点击按钮，dom元素没有加载完，就弹出打印框了，所以我加了一个异步事件，还有记得把抽屉关了。
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 558
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
基于python+django+vue的旅游网站系统
计算机学姐的博客
09-17 1651
【2025最新】基于协同过滤+python+django+vue+MySQL的旅游网站系统，前后端分离。
JS的输出语句
J3259392566的博客
09-13 296
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 650
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
《实现 HTML 图片轮播效果》
qq_69304031的博客
09-11 908
在网页设计中，轮播效果是非常常见且重要的元素。它可以在有限的空间内展示多张图片或者广告，能够有效地吸引用户的注意力，提高信息展示的效率。常用于网站首页的焦点图展示、商品图片展示等场景。以下是一个简单的 HTML、CSS 和 JavaScript 实现的图片轮播代码示例。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 325
echarts饼图内容循环播放实现
计算机毕业设计 基于SpringBoot的课程教学平台的设计与实现 Java+SpringBoot+Vue 前后端分离 文档报告 代码讲解 安装调试
weixin_19164791635
09-12 944
本文介绍了一款基于Java、SpringBoot和Vue.js技术的课程教学平台。该平台服务于管理员、学生和教师，提供教学资源管理、课程信息浏览、作业提交与批改等功能，旨在优化教学流程，提升教育质量，促进教育资源的数字化共享，推动教育信息化发展。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值