jQuery+CSS实现简单切换菜单示例

2019-11-20 09:24:23

字体：大中小

来源：转载

供稿：网友

本文实例讲述了jQuery+CSS实现简单切换菜单的方法。分享给大家供大家参考，具体如下：

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题页</title><script src="jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript">     $(function(){       toggleEvent(0);       var mTitle = $(".menuTitle");       mTitle.each(function(i){        $(this).click(function(){         toggleSlideEvent(i);         $(this).css("border-bottom","1px #ccccff solid");        });       });     });     function toggleSlideEvent(i)     {      $("ul",".menu1").css("display","none");      $("ul",".menu1").eq(i).slideDown();      $(".menuTitle").each(function(){        $(this).css("border-bottom","0px #ccccff solid");      });     }     function toggleEvent(i)     {      $("ul",".menu1").css("display","none");      $("ul",".menu1").eq(i).css("display","block");      $(".menuTitle").eq(i).css("border-bottom","1px #ccccff solid");     }  </script>  <style type="text/css">    .menu1    {      border: 1px #CCCCFF solid;      border-top: 0px;      width: 160px;    }    .menuTitle    {      width: 100%;      height: 26px;      border-bottom: 0px #CCCCFF solid;      border-top: 1px #CCCCFF solid;      text-align: left;      line-height: 26px;      cursor: pointer;    }    ul    {      border: 0px #CCCCFF solid;      width: 100%;      margin-left: 0px;      margin-top: 0px;    }    ul li    {      height: 36px;      line-height:36px;      border: 0px gray solid;      margin-top: 0px;      margin-left: 0px;      padding-left:20px;      list-style-type:none;      /*background:url(images/Title.png);*/    }    ul li:hover    {      height: 36px;      line-height:36px;      border: 0px gray solid;      margin-top: 0px;      margin-left: 0px;      padding-left:20px;      list-style-type:none;      /*background:url(images/Title.png);*/      cursor:pointer;    }  </style></head><body>  <form id="form1" runat="server">  <div class="menu1">    <div class="menuTitle">      TITLE1</div>    <ul>      <li>Menu1</li>      <li>Menu2</li>      <li>Menu3</li>      <li>Menu4</li>      <li>Menu5</li>    </ul>    <div class="menuTitle">      TITLE2</div>    <ul>      <li>Menu1</li>      <li>Menu2</li>      <li>Menu3</li>      <li>Menu4</li>      <li>Menu5</li>    </ul>    <div class="menuTitle">      TITLE3</div>    <ul>      <li>Menu1</li>      <li>Menu2</li>      <li>Menu3</li>      <li>Menu4</li>      <li>Menu5</li>    </ul>  </div>  </form></body></html>

更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：jQuery+css实现非常漂亮的水平导航菜单效果

下一篇：AngularJS 指令详细介绍