js如何实现二级菜单

2021-01-27 19:50发布

7条回答
梵梵
2楼 · 2021-01-28 09:28

首先是Html代码,习惯上会将菜单放在一个div里,使用盒子模型,方便以后的操作和设置样式。

二级菜单也就是在一级菜单中的li中再添加一个ul-li结构

 

            
  • A
  •             
  • B
  •             
  • C                 
                          
    • C1
    •                     
    • C2
    •                     
    • C3
    •                 
               
  •  

 

 

 

 

 


 

使用css代码设置样式

 

 

 

 

 

 

解释三个重要的css代码:

 

1.写出一个ul-li菜单时,它会默认垂直排列,而我们需要的是水平的菜单栏,所以需要设置li的浮动:float:left

2.当鼠标悬浮在有二级菜单的一级菜单选项时,才会出现二级菜单,所以在鼠标不悬浮的情况下,需要把二级隐藏起

来display:none

3.最后,设置li :hover ul 这个意思是,当鼠标悬浮在li上时,li下的ul呈现状态,hover是悬浮的意思,在设置a标签样

式时应该会接触过

 

 

 

方法二:使用jQuery实现

 

要用到jQuery首先第一步就是引入jquery.js文件

[removed][removed]

 

在平时做网页项目时,最好是将css,html,js分开,在html页面中引入css和js文件,css文件引入放在head中,js放在body的最后,这是为了在加载网页时,先加载出它的样式,最后加载js动态。那么注意了,在这里如果你的js代码是放在body中,那么引入jquery文件必须放在js代码之前,浏览器编译html文件时,是从上自下编译的,如果jquery文件放在最后,那么在你的js代码又使用到了jquery的功能,后果可想而知,效果是出不来的。

 

下面两种方式都是可行的,第一种二级菜单出现的很直接,fade呢有一个渐入渐出的过程

200,300的都是时间,估计是以ms为单位,有待查验。

 

js代码:

 

[removed]/* js 语句 $(function(){});*/$(function(){$(".test li").hover(/*找父亲(li)下面的ul*/function() {$(this).find("ul").show(200);},function(){$(this).find("ul").hide(300);});$(".test li").hover(function(){$(this).find("ul").fadeIn(300);},function(){$(this).find("ul").fadeOut(300);});});[removed]

 

 

 

 

 


 

 

方法三:使用Bootstrap实现

 

如果不了解Bootstrap是什么,出门找百度咨询一下

 

和jquery类似的,需要引入三个文件:

1. bootstrap.min.css   2.  jquery-3.1.0.min.js  3. bootstrap.min.js

因为bootstrap所有js代码都是需要jquery做支撑的,所以只要引入bootstrap.js都必须引入jquery

 

其实博主前面都偷了个懒,没有给每个li添加a标签,在实际操作中这是非常必要的,除非你要做一个不实现跳转功能

的摆设菜单,那就随便怎么玩了。使用Bootstrap框架就必须使用a标签了,因为它的很多样式是设置在a标签上的,

不使用没有效果,相比前面的两种来说,使用框架又省力又省心,非常简单。

 

只需三步:

1.为一级菜单的ul添加class-nav nav-pills(或者nav-tabs 等等)

2.为一级菜单中有下拉二级菜单的li添加 class-dropdown

为a标签添加属性:data-toggle="dropdown" 以及class-dropdown-toggle

3.给2步骤中li下的ul添加class-dropdown-menu

 

实例:

 

 


樱田妮妮NiNi
3楼 · 2021-01-28 09:34

第一种是采用css来控制的;主要采用float,和position,displayhover来完成的。具体看以参看后面的源代码。

主要采用hover,和display来实现的。

采用的是js来控制的,mouseovermouseout来控制显示的。当然也利用了css.

这种也是纯css的形式,主要利用display:inline-block;vertical-align:top;来实现的。如果不用vertical-align的话,就会导致一级菜单被二级菜单顶起来,使得上面无法对其,因此才需要设置。


小磊子
4楼 · 2021-01-28 09:38


#"/#"meta name="
link rel="a>>li>ul> type=">
<

  • div class=".ico"一级菜单1<#"text/
    [removed]#"keywords">一级菜单2<二级菜单2li>> /
    <

    $(document); <<

    • >a>html xmlns="/

    • .ready(function () {
      $('/

      <
      >

      js.children();a>//://www;li>li>li>>


      <
      #"a>一级菜单3/
      <二级菜单3
    • <
      <{模 板}
    • meta name="#"#"a href="li>
    • li>a href="ul class="a>">-/.removeClass('a href="二级菜单3<
      <二级菜单4<
      < < src>/#">W3C/
      < /li>li>>
    • />Content-Type">>.org/1999/xhtml"
    • a>a>text/二级菜单2< < <
    • <
    • .js"//li>>
      });DTD HTML 4;div id="/li>
    • /
      <
      >>script>
      <.6;javascript"
      <
    • />/<
      <.js"a href="EN"#"
      a>/>hide"/#".4; charset=utf-8"text/li>
      > <>sidebar" src="a href="/hide'[removed]<
      <>.w3;
      <#"/"a>javascript"

      <
      });li>li>li>/二级菜单41<.min;/>// js; content="li>a href=">a href="li>

    • text/
      <"
      <.mouseenter(function () {
      $(this);>li>
    • meta http-equiv=");a>ul> /
      << <
      <
      li> content="/#"/
      <#"body>li>/>a href="#"a href="一级菜单4< < href>/a>

      script>a>/a href="body>
      >ul>a href="

      <

  • 1234567
    5楼 · 2021-01-28 10:38

    第一种是采用css来控制的;主要采用float,和position,display,hover来完成的。具体看以参看后面的源代码。

    主要采用hover,和display来实现的。

    采用的是js来控制的,mouseover,mouseout来控制显示的。当然也利用了css.

    这种也是纯css的形式,主要利用display:inline-block;和vertical-align:top;来实现的。如果不用vertical-align的话,就会导致一级菜单被二级菜单顶起来,使得上面无法对其,因此才需要设置。


    清屿
    6楼 · 2021-01-28 14:07

    第一种是采用css来控制的;主要采用float,和position,displayhover来完成的。具体看以参看后面的源代码。

    主要采用hover,和display来实现的。

    采用的是js来控制的,mouseovermouseout来控制显示的。当然也利用了css.

    这种也是纯css的形式,主要利用display:inline-block;vertical-align:top;来实现的。如果不用vertical-align的话,就会导致一级菜单被二级菜单顶起来,使得上面无法对其,因此才需要设置。


    思路:


    1、监听鼠标移入移出事件的方式进行显示和隐藏


    2、通过hover伪类的css方式进行


    web-马赏
    8楼 · 2021-02-23 20:46

    "box">        
    "firstbox">水果
           
      "twobox">            
    • 苹果
    •            
    • 香蕉
    •            
    • 蓝莓
    •            
    • 荔枝
    •            
    • 樱桃
    •        
       

    [removed]        //获取元素        var box = document.getElementsByClassName('box')[0];        var twobox = document.getElementsByClassName('twobox')[0];        //当鼠标经过大盒子的时候触发        box.onmouseover = function () {            twobox.style.display = 'block';        }        //当鼠标离开大盒子的时候触发        box.onmouseout = function () {            twobox.style.display = 'none';        }    [removed]

    相关问题推荐

    • 回答 97
      已采纳

      Js给初学者的印象总是那么的杂而乱,相信很多初学者都在找轻松学习Js的途径。在这里给大家总结一些学习Js的经验,希望能给后来的学习者探索出一条轻松学习Js之路。Js给人那种感觉的原因多半是因为它如下的特点:A:本身知识很抽象、晦涩难懂,如:闭包、内置...

    • 回答 4

      看图:

    • 回答 18

      基本类型( 6种 ):Number ( 数值 ) String ( 字符串 )Boolean ( 布尔 ) Undefined ( 未定义 )Null ( 空 )ES6 - Symbol  ( 唯一 )

    • 回答 18

      timeoutId: 定时器IDfunc: 延迟后执行的函数code: 延迟后执行的代码字符串,不推荐使用原理类似eval&#40;&#41;delay: 延迟的时间(单位:毫秒),默认值为0param1,param2: 向延迟函数传递而外的参数,IE9以上支持setInterval: 以固定的时间间隔重复调用一个函...

    • 回答 19

      JavaScript 使网页增加互动性,使有规律地重复的HTML文段简化,减少下载时间。JavaScript 能及时响应用户的操作,对提交表单做即时的检查,无需浪费时间交由 CGI 验证。JavaScript 的特点是无穷无尽的,只要你有创意。...

    • 回答 15

      Number类型String类型Boolean类型Undefined类型Null类型

    • 回答 14

      空格在ASCII中的值为32,空字符为0,可本人觉得不就是都是为空的吗,没有什么区别?char mychar1,mychar2;mychar1=&#39; &#39;;mychar2=&#39;\0&#39;;printf(mychar1=%d,mychar2=%d,mychar1,mychar2);//其中mychar1=32;mychar2=0;...

    • 回答 16

      1.变量名可以有数字0~9、大小写字母、下划线、美元符$组成。2.变量名不能以数字开头。 当我们以数字为开头时,代码就会出现橙色下划线,代表命名不...3.变量名不允许使用中文。 不能允许使用中文这个就不用多说了吧,不管你在哪找代码来看,代码中...4.区分大小写...

    • 回答 8

      向一个对象数组里面添加新的属性var arry= [{a:11,b:22,c:33,d:44},{a:11,b:0,c:0,d:44},{a:11,b:22,c:99,d:99}];var arry2=[];arry.map(((item, index)=> {arry2.push(Object.assign({},item,{mess1:item.c,mess2:item.d}))}))cons...

    • 回答 2

      我觉得getTopWindow() 应该是他自己写的函数 mask  应该是getTopWindow()函数中 return 出的一个什么玩意show()  jQuery的显示

    • 回答 16

      看上图

    • 回答 9

      如图所示

    • 回答 12

      1、原型对象也是普通的对象,是对象一个自带隐式的 __proto__ 属性,原型也有可能有自己的原型,如果一个原型对象的原型不为 null 的话,我们就称之为原型链 2、 原型链是由一些用来继承和共享属性的对象组成的(有限的)对象链...

    • js选项卡的实现原理2021-06-15 21:48
      回答 6

      如图所示,最简单的选项卡思路:选项卡就是点击按钮切换到相应内容,其实就是点击按钮把内容通过display(block none)来实现切换的。1、首先获取元素。2、for循环历遍按钮元素添加onclick 或者 onmousemove事件。3、因为点击当前按钮时会以高亮状态显示,所以...

    • 回答 4

      1、js截取两个字符串之间的内容:123var str = aaabbbcccdddeeefff; str = str.match(/aaa(\S*)fff/)[1]; alert&#40;str&#41;;//结果bbbcccdddeee2、js截取某个字符串前面的内容:123var str = aaabbbcccdddeeefff; tr = str.match(/(\S*)fff/)[1];......

    • 回答 4

      如果是ajax 就直接获取如果是传到一个页面 就再get再在js中使用 就可以获取了。 可以在js中获取一个变量 但是不能写入一段java代码.

    没有解决我的问题,去提问