第一次用JQUERY做导航栏目

CSS与JS实现菜单折叠

最新推荐文章于 2022-11-05 10:14:52 发布

原创最新推荐文章于 2022-11-05 10:14:52 发布 · 582 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #menu #class #div #function #url

.NET开发专栏收录该内容

81 篇文章

订阅专栏

本文介绍如何使用CSS和JavaScript实现网页左侧菜单的显示与隐藏功能。通过点击菜单标题，可以展开或收起对应的子菜单项，实现了良好的交互效果。

css文件

#main_left{margin-left:5px; text-align:right; vertical-align:top; height:200px;}
#main_left dt{margin-bottom:2px; padding-right:5px; height:25px; line-height:25px; font-size:13px; }
#main_left li{padding-right:5px; height:22px;line-height:22px; background-color:#fff;}
#main_right{width:100%; vertical-align:top;}

dt.show_menu{background-color:#EEEEEE; background-image:url(show_menu.gif);background-repeat: no-repeat; vertical-align:middle;}
dt.hidden_menu{background-color:#DCDCDC;background-image:url(hidden_menu.gif);background-repeat: no-repeat;}

html 文件

<td id="td_main_left">
        <div id="main_left">
        
           <dt class="show_menu" name="menu1">My Inquiries</dt>
             <div id="menu1">
                 <li><a href="company/companyadd.aspx" target="right">添加公司信息</a></li>
                 <li><a href="company/personadd.aspx" target="right">添加客户信息</a></li>
             </div>
             
           <dt class="show_menu" name="menu2">My Products</dt>
             <div id="menu2">
                 <li><a href="company/companylist.aspx" target="right">公司信息列表</a></li>
                 <li><a href="company/personlist.aspx" target="right">客户信息列表</a></li>
             </div>
            
            <dt class="show_menu" name="menu3">Members</dt>
             <div id="menu3">
                 <li><a href="company/companyadd.aspx" target="right">添加公司信息</a></li>
                 <li><a href="company/personadd.aspx" target="right">添加客户信息</a></li>
                 <li><a href="company/companylist.aspx" target="right">公司信息列表</a></li>
                 <li><a href="company/personlist.aspx" target="right">客户信息列表</a></li>
             </div>
            
           <dt class="show_menu" name="menu4">My Company</dt>
            <div id="menu4">
                <li><a href="company/companyadd.aspx" target="right">添加公司信息</a></li>
                <li><a href="company/personadd.aspx" target="right">添加客户信息</a></li>
            </div>
            
           <dt class="show_menu" name="menu5">My Counte</dt>
            <div id="menu5">
                <li><a href="company/companylist.aspx" target="right">公司信息列表</a></li>
                 <li><a href="company/personlist.aspx" target="right">客户信息列表</a></li>
            </div>
            
            <dt class="show_menu" name="menu6">Help</dt>
               <div id="menu6">
                <li><a href="company/companyadd.aspx" target="right">添加公司信息</a></li>
                <li><a href="company/personadd.aspx" target="right">添加客户信息</a></li>
               </div>
            
         </div>
   </td>

JS代码

//用户后台的伸缩功能 所有的都显示与隐藏

$(function(){$("#main_left>dt").bind("click",function(){
	 $('#'+$(this).attr("name")).slideToggle("slow"); 
	 if($(this)[0].className=="show_menu")
	 {
	   $(this)[0].className="hidden_menu";
	 }
	 else
	 {
	  $(this)[0].className="show_menu";
	 }
});});