下拉菜单的两种实现方式

需求：
1：鼠标滑过，nav中的标题底色变为orange，并且显示底下的内容
2：鼠标离开，nav中的标题底色去除，并且隐藏的内容

HTML

 <nav><ul><li><a href="#">我是1</a><div class="item item1"><div>1</div><div>2</div><div>3</div></div></li><li><a href="#">我是2</a><div class="item item12"><div>2</div><div>2</div><div>2</div></div></li><li><a href="#">我是3</a><div class="item item3"><div>3</div><div>3</div><div>3</div></div></li><li><a href="#">我是4</a><div class="item item4"><div>4</div><div>4</div><div>4</div></div></li></ul></nav>

CSS

    * {margin: 0;padding: 0;}a {text-decoration: none;color: #000;}ul,li {list-style: none;}nav {height: 30px;line-height: 30px;width: 300px;margin: 0 auto;}ul {display: flex;justify-content: space-between;text-align: center;}ul li {position: relative;flex: 1;border: 1px solid #ccc;border-right: none;}ul li:last-child {border-right: 1px solid #ccc;}.active {/* 鼠标滑过的样式 */background: orange;}.item {position: absolute;top: 30px;left: 0;display: flex;flex-direction: column;justify-content: space-between;text-align: center;width: 75px;height: 96px;background: yellow;display: none;}.item div {border: 1px solid #ccc;border-collapse: collapse;}

  <script src="./js/jQuery.min.js"></script><script>// // 需求： 鼠标滑过nav的标题，底色变位orange，并且显示下面的内容； 鼠标离开nav标题的时候，隐藏底色和内容// let nav = document.querySelector("nav");// let lis = nav.querySelectorAll("ul li");// //方法一：  使用js的写法书写下拉菜单// lis.forEach((v, i) => {//   lis[i].addEventListener("mousemove", function () {//     //01：排他思想：显示底色//     lis.forEach((v, i) => {//       this.className = ""//     })//     this.className = "active";//     //02：显示下面的内容//     this.children[1].style.display = "block";//   })//   lis[i].addEventListener("mouseout", function () {//     this.className = "";//     this.children[1].style.display = "none";//   })// })//方法二：  使用jq的写法书写下拉菜单$(function () {$("nav ul>li").hover(function () {//上面的底色$(this).addClass("active").siblings().removeClass();//下面内容下滑和滚动$(this).children(".item").stop().slideToggle();})})</script>

下拉菜单的两种实现方式相关推荐

下拉菜单的两种实现方式：CSS和JS
本文的下拉菜单核心是通过改变DISPLAY的值,来改变菜单的出现和隐藏. 在此简单介绍DISPLAY: display:[参数] 属性定义:设置元素如何显示. 参数:默认为inline,具体参数如下表 ...
下拉菜单的四种实现方式
今日在做下拉菜单时思考实现下拉菜单的几种实现方式,现在对这几种实现方式进行总结. 1:改变下拉菜单的display /*HTML结构,以下四种方法通用*/ <div id="conta ...
用纯css实现下拉菜单的几种方式
第一种:display:none和display:block切换 1 <!DOCTYPE html> 2 <html lang="en"> 3 <he ...
php可输入的下拉框,JavaScript_可编辑下拉框的2种实现方式，可编辑下拉框-HTML 复制代码代 - phpStudy...
可编辑下拉框的2种实现方式可编辑下拉框-HTML A类 B类 C类 D类可编辑下拉框-JS 可编辑下拉框可编辑下拉框作者 function combox(obj,select){ this.o ...
java excel 数据有效性_Excel设置数据有效性实现单元格下拉菜单的3种方法
Excel设置数据有效性实现单元格下拉菜单的3种方法一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的"数据"→"有效性"→出现&qu ...
设置数据有效性实现单元格下拉菜单的3种方法
设置数据有效性实现单元格下拉菜单的3种方法一.直接输入: 1.选择要设置的单元格,譬如A1单元格: 2.选择菜单栏的"数据"→"有效性"→出现 ...
Finereport 设置下拉框的两种方式
执行结果. 第一种方式:在模板数据集查询里面添加Where条件: 1.在数据集中添加Sql语句: SELECT * FROM 订单 SELECT * FROM 订单 where 货主地区='${dq} ...
eclipse maven项目 class类部署不到tomcat下_Spring Boot的两种部署方式：jar包和war包
前言 Spring Boot可以通过在pom中配置spring-boot-maven-plugin插件打包,支持两种打包部署方式jar包部署和war包部署. jar包部署默认的打包方式是jar包,或 ...
下拉框数据绑定两种方式
1.利用cs包,DataAccess.cs #region string m_str = @"select sname from service group by sname"; ...

下拉菜单的两种实现方式

下拉菜单的两种实现方式相关推荐

最新文章

热门文章