~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术：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> |