菜单栏的展开&关闭

   

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：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;">&gt;&gt;</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;">&gt;&gt;</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;">&gt;&gt;</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;">&gt;&gt;</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;">&gt;&gt;</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;">&gt;&gt;</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>