菜单栏的展开&关闭
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:VS、jQuery
作者:#33
撰写时间:撰写时间:2019年05月28日
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
运用jQuery方法实现(使用前引入插件):点击按钮(如功能_1)使隐藏的ul标签直接展开显示li标签,再点击直接关闭,无动画效果。点击按钮(功能_4)使隐藏的ul标签向下滑动显示,再点击向上滑动隐藏。
引入插件:
<script src="~/Content/jquery-1.10.2.min.js"></script> |
Body中的代码:
<div class="ulmenu1"> <h>菜单栏 1:直接显示&隐藏</h> <button id="closeopen">功能_1 <span style="float:right; font-size:15px;">>></span></button> <ul id="menu_li" style="display:none;"> <li>001</li><li>002</li> </ul> <button id="closeopen1">功能_2<span style="float:right; font-size:15px;">>></span></button> <ul id="menu_li1" style="display:none;"><li>002</li><li>003</li></ul> <button id="closeopen2">功能_3<span style="float:right; font-size:15px;">>></span></button> <ul id="menu_li2" style="display:none;"><li>002</li><li>003</li></ul> </div> <div class="ulmenu1"> <h>菜单栏 2:滑入滑出</h> <button id="closeopen4">功能_4<span style="float:right; font-size:15px;">>></span></button> <ul id="menu_li4" style="display:none;"><li>002</li><li>003</li></ul> <button id="closeopen5">功能_5<span style="float:right; font-size:15px;">>></span></button> <ul id="menu_li5" style="display:none;"><li>002</li><li>003</li> </ul> <button id="closeopen6">功能_6<span style="float:right; font-size:15px;">>></span></button> <ul id="menu_li6" style="display:none;"><li>002</li><li>003</li></ul> </div> |
基本样式:
<style> h{width:200px; height:50px; line-height:50px; } .ulmenu1{width:200px; height:100%; float:left; margin-left:100px;} button{ width:200px; height:35px; background:#0094ff; border:none; outline:none; border-bottom:1px solid #000; margin-top:5px; border-radius:10px; } ul{ padding:0px; width:200px; height:100%;margin:0px; } ul li{ margin-top:2px; width:200px; height:30px; line-height:30px; text-align:center; background:#ff6a00; border-bottom:1px solid #fff;list-style:none;border-radius:10px;} </style> |
页面加载jQuery代码:
无动画效果直接显示 HTML 元素的隐藏和展开有单方面的方法:通过 jQuery,可以使用 hide() 和 show() 方法来实现。而toggle() 方法可以切换这两种方法的效果。如下列jQuery代码:
按钮的click方法(获取按钮id):获取ul标签的id使用toggle()方法切换展开&隐藏的效果。
<script> ètoggle(): $(document).ready(function () { //功能1 $("#closeopen").click(function () {$("#menu_li").toggle();}); //功能2 $("#closeopen1").click(function () {$("#menu_li1").toggle();}); //功能3 |
有动画效果显示HTML 元素的隐藏和展开有单方面的方法:
slideDown() 方法用于向下滑动元素;slideUp() 方法用于向上滑动元素。
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
èslideToggle() $("#closeopen2").click(function () {$("#menu_li2").toggle();}); //功能4 $("#closeopen4").click(function(){$("#menu_li4").slideToggle("slow");}); //功能5 $("#closeopen5").click(function () {$("#menu_li5").slideToggle("slow");}); //功能6 $("#closeopen6").click(function () {$("#menu_li6").slideToggle("slow");});}); </script> |