jq怎样实现下拉菜单

除了使用原生js实现下拉菜单，我们还可以使用jq来实现下拉菜单的功能，那么jq怎样实现下拉菜单呢？

操作方法

  • 01

    首先，在hbuilder里面书写两个div标签，并且给它们各取一个id名称，这里我就分别设置它们的id名称为one和onemenu。

  • 02

    接着我们设置id为one的css样式，这里我就设置成天蓝色。

  • 03

    之后，我们再来设置onemenu的css样式，为了区别开来，我设置它为红色。

  • 04

    之后，我们来预览一下效果，可以看到，有天蓝色和红色两部分，接着我们要做的就是鼠标点击蓝色部分的，红色部分的会往上折叠，而再次点击蓝色部分，红色部分就会往下移动。

  • 05

    接着使用jQuery方法来给one所在的div绑定一个click事件。

  • 06

    然后给click绑定一个匿名函数。

  • 07

    然后在匿名函数里面写上方法，jQuery("#onemenu").slideToggle(); 现在我来解释一下这条语句，jQuery("#onemenu")表示获取到id为onemenu的div元素，当触发事件时，元素就会调用slideToggle方法。

  • 08

    slideToggle可以设置时间，这里我就设置成3000毫秒，相当于3秒。

  • 09

    这样，当我们点击蓝色部分时，红色部分就会慢慢上滑隐藏，而再次点击时就会慢慢下滑显示。这里因为是静态图片所以无法看到滑动效果，大家可以练习看看效果。

  • 10

    贴出源代码，修改一下jQuery插件的相对路径就可以看看效果了。 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <title>Document</title> <style type="text/css"> #one{ width: 150px; height: 30px; background: skyblue; } #onemenu{ width: 150px; height: 80px; background: red; } </style> <script src="js/jquery-3.2.1.min.js" type="text/javascript"> </script> <script type="text/javascript"> jQuery(function(){ jQuery("#one").click( function(){ jQuery("#onemenu").slideToggle(3000); } ); }) </script> </head> <body> <div id="one">一级菜单 </div> <div id="onemenu"> 一级菜单 一级菜单 </div> </body> </html>

赞 (0)

相关推荐

  • 用jQuery制作下拉菜单

    用jQuery制作下拉菜单,可以用toggle,点击一次显示,再次点击的时候就隐藏. 操作方法 01 首先,新建一个html文档,代码如下: <html> <head> < ...

  • HTML网页怎样制作二级下拉菜单，二级滑动菜单

    很多小可爱自学了HTML网页之后,也想做一些交互特效,比如二级下拉菜单,鼠标经过下滑菜单等,今天小编我就来分享一下HTML网页二级下拉菜单,小编我用jQuery来写的二级下拉菜单,挺简单的. 操作方法 ...

  • Intelliscreenx开关插件大全,补充下拉菜单手电开关

    理论上Intelliscreenx可以使用SBSettings的各个开关，不过有个别的没成功. 需要拷贝两个文件: 一个是Preferences_for_SBSettings_only_pref,到目 ...

  • Excel如何制作下拉列表,excel下拉菜单的创建方法

    Excel下拉列表通常都是利用“数据有效性”来实现的，通过“数据有效性”设置，可以让Execl的某一单元格出现下来菜单的效果，那么如何实现excel下拉列表呢？ Excel下拉列表、Excel下拉菜单 ...

  • IE10地址栏下拉菜单历史记录与收藏夹不显示方法

    Internet Explorer 10 浏览器地址栏的下拉菜单中，默认显示了历史记录和收藏夹，可以方便的访问之前访问过的站点，但是当访问网站多的时候，地址栏会很长，而且有可能泄露隐私，如果不需要此方 ...

  • excel下拉菜单怎么做 excel2010表格制作下拉菜单教程图解

    excel 每个功能都非常实用，今天我教大家怎么做“excel下拉菜单”，给大家展示带使用下拉菜单中的选项，使关联单元格中的数据发生对应的变化的小功能。 制作步骤如下： 第一步：打开excel2010 ...

  • 如何使用Excel表格制作二级下拉菜单

    下面Word联盟就为大家提高三种 制作二级下拉菜单全步骤。 第一种制作二级下拉菜单方法：使用Excel函数INDIRECT 看看例子 很明显，我们希望在一级选择机房故障，那么二级就出现他下面的列表。 ...

  • 巧用WPS下拉菜单快速录入数据的方法介绍

    在使用WPS表格的过程中，经常需要录入大量的数据。如果每个数据都通过键盘来输入，不仅浪费时间还浪费精力。利用WPS表格的数据有效性功能，可以快速、准确地输入数据。例如教师希望按学生的考试成绩划分为四个 ...

  • 如何在Exce中l录入时开启单元格自动下拉菜单

    当我们在Excel表格中需要输入大量的重复数据时，往往利用数据的有效性来制作一个下拉菜单以提高重复数据的输入速度。但在实际的操作过程中，必须选中需要输入重复数据的单元格并单击该单元格右边的下拉箭头，才 ...