JS中使用jq方法实现二级菜单的切换和隐藏

最新推荐文章于 2024-07-30 10:56:44 发布
最新推荐文章于 2024-07-30 10:56:44 发布
阅读量1.5k 收藏 2
点赞数
分类专栏： JavaScript HTML+CSS 文章标签： javascript 前端 css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42943920/article/details/122589117
版权
<!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&l.
摘要由CSDN通过智能技术生成

在这里插入图片描述

<!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>
  <style>
    * {
   
      margin: 0;
      padding: 0;
    }
    ul,ol,li{
   
      list-style: none;
      cursor: pointer;
    }
    i{
   
      font-style: normal;
    }
    ul{
   
      width: 300px;
      border: 1px solid pink;
      margin: 30px auto;
    }
    ul>li{
   
      /* 段落缩进20px */
      text-indent: 20px;
    }
    ul>li>ol{
   
      text-indent: 40px;
      display: none;
    }
  </style>
</head>
<body>
  <ul>
    <li class="first">
      <i class="f">+
最低0.47元/天 解锁文章
辰辰北
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
-jQuery- 二级菜单 点击展示与隐藏 (小案例)
weixin_49731605的博客
10-30 1188
引入jquery <script> //把有ul的li添加一个类名(这里用了.plus 和 .minus) 再添加一个单击事件 $(function(){ $("li:has(ul)") //获取含有ul的li .addClass("plus") //添加plus类名 .click(function(e){ //添加单击事件 if($(e.target).children().length){ //判断当前事件源有多少个子元素 $(this).toggleClass
JavaScript 使用原生js和jquery两种方法，实现tab栏切换
路宇的博客
12-18 1576
代码如下，具体注释已经在代码中给出： <!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">
JavaScript：实现内容显示隐藏（展开收起）功能
ChinaDragon10的博客
06-28 237
JavaScript实现显示隐藏功能，使用JavaScript给ul标签动态添加li标签
JQ实现二级菜单联动
想好了再写！
04-30 456
<!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>二.
二级导航点击后的显示和隐藏js代码
m0_58717408的博客
01-31 174
使用jqurey实现点击一级导航显示二级导航，并且点击另一个一级导航时，前面显示的二级导航隐藏，再点击当前一级导航时，隐藏当前二级导航。二级导航的显示和隐藏。
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
2401_85111725的博客
06-21 222
由于篇幅原因，就不多做展示了[外链图片转存中…(img-UbDU3PrN-1718914660727)][外链图片转存中…(img-xch8jBQv-1718914660728)][外链图片转存中…(img-CCQ2pESo-1718914660728)][外链图片转存中…(img-dtLMibY5-1718914660728)][外链图片转存中…(img-EUIaPI4t-1718914660729)][外链图片转存中…(img-QKVEDG1D-1718914660729)]
LV2之------DOM操作（JS & JQ 二级联动菜单的四种方法 & 多选反选& 文本框内容相互剪切)------练习
跛鳖千里，丘山崇成
04-29 544
LV2------DOM操作练习（二级联动菜单的四种方法 & 多选反选，）
js、jq实现tab选项卡切换
努力变好
08-02 2554
js、jq实现tab选项卡切换
使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
热门推荐
杨明金的博客
11-16 1万+
查看本章节 查看作业目录 需求说明： 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态 实现思路： 在页面中添加<ul> 标签，用来显示无序列表。在<ul> 标签下添加两个<li> 标签，用来显示列表内容 在<li> 标签下添加两个<div> 标签，第一个显示一级列表的内容，第二个显示二级列表的
pc端1号店项目用JQ实现二级菜单和轮播图
weixin_46409887的博客
04-25 2730
效果图: 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="css/yihao.css"> &lt...
js实现二级菜单点击显示当前内容效果
10-18
在网页设计中，二级菜单是一种常见的交互元素，用于提供更精细的导航结构。本文将详细介绍如何使用JavaScript实现二级菜单点击时显示当前内容的效果。这个功能对于提升用户体验和增强网站的可操作性至关重要。 首先...
jquery导航菜单二级菜单slide滑动渐隐显示
06-05
在本项目中，jQuery被用来实现二级菜单的交互效果。 **导航菜单结构** 一个标准的二级导航菜单通常由HTML元素构建，包括`<ul>`（无序列表）和`<li>`（列表项）。一级菜单项包含二级菜单的触发器，而二级菜单则隐藏...
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
11-24
这段jQuery代码在文档加载完成后，为一级菜单项绑定`hover`事件，当鼠标进入或离开时，二级子菜单会通过`slideToggle`动画进行切换。 通过这样的组合，我们可以创建出一个响应式且有动态效果的横向二级下拉菜单。...
jQ鼠标滑过显示二级下拉菜单代码.zip
11-24
例如，使用`$(selector).hover(function() {}, function() {})`可以为选择器绑定鼠标悬停事件，然后在回调函数中修改二级菜单的`display`属性。同时，jQuery还提供了一套简洁的动画API，可以用来平滑地显示或隐藏...
jquery二级下拉菜单展示用户登录页面
06-05
同样，当鼠标离开时，可以使用`.hide()`方法隐藏二级菜单。此外，还可以使用`.toggle()`方法实现点击切换的效果。 接下来，我们将这个二级下拉菜单与用户登录页面结合。用户登录页面是许多网站的核心部分，允许用户...
JavaScript青少年简明教程：函数及其相关知识（下）
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
VUE3自定义指令防止重复点击多次提交
最新发布
MadSnail00的博客
07-30 80
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 431
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
使用jq实现通过左右箭头和点击按钮实现切换图片
03-25
A： 假设有一个包含图片路径的数组： ```json { "images": [ {"src": "path/to/image1.jpg"}, {"src": "path/to/image2.jpg"}, {"src": "path/to/image3.jpg"} ] } ``` 可以使用jq和jQuery实现图片切换功能： ```javascript // 获取图片数组 var images = $(".images").data("images"); // 当前图片的索引 var currentIndex = 0; // 显示当前图片 function showImage() { var src = images[currentIndex].src; $(".image").attr("src", src); } // 点击左箭头切换到上一张图片 $(".prev").click(function() { currentIndex = (currentIndex - 1 + images.length) % images.length; showImage(); }); // 点击右箭头切换到下一张图片 $(".next").click(function() { currentIndex = (currentIndex + 1) % images.length; showImage(); }); // 点击数字按钮切换到对应图片 $(".button").click(function() { currentIndex = $(this).index(); showImage(); }); ``` 可以在HTML中添加以下代码： ```html <div class="images" data-images='{ "images": [ {"src": "path/to/image1.jpg"}, {"src": "path/to/image2.jpg"}, {"src": "path/to/image3.jpg"} ] }'> <img class="image" src="path/to/image1.jpg"> <button class="prev"><</button> <button class="next">></button> <button class="button">1</button> <button class="button">2</button> <button class="button">3</button> </div> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值