菜单栏的展开

运用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="">功能_1 <span style="float:right; font-size:15px;">&gt;&gt;</span></button>
    <ul id="" style="display:none;"> <li>001</li><li>002</li> </ul>
    <button id="">功能_2<span style="float:right; font-size:15px;">&gt;&gt;</span></button>
    <ul id="" style="display:none;"><li>002</li><li>003</li></ul>
    <button id="">功能_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>
无动画效果直接显示 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>