时间:2021-05-25
菜单为二级,初始化时为折叠效果,单击大项标题时展开,显示二级列表。
HTML代码如下:
复制代码 代码如下:
<body>
<div class="mainleftFAQ">
<div class="category">
<img src="images/admin.gif" width="215" height="66" />
</div>
<div id="disp">
</div>
<div class="bartitleFAQ">
<img src="images/yuan.gif" /><span class="admintext11">服务管理</span></div>
<div class="FAQlist">
<ul>
<li><a href='#'> 等待提交</a></li>
<li><a href='#' title=''> 等待发布</a></li>
<li><a href='#' title=''> 正式项目</a></li>
<li><a href='#' title=''> 点此新增</a></li></ul>
</div>
<div class="bartitleFAQ">
<img src="images/yuan.gif" /><span class="admintext11">更新流程</span></div>
<div class="FAQlist">
<ul>
<li><a href='#'> 后台搜索</a></li>
<li><a href='#' title=''> 更新流程</a></li>
</div>
<div class="bartitleFAQ">
<img src="images/yuan.gif" /><span class="admintext11">FAQ管理</span></div>
<div class="FAQlist">
<ul>
<li><a href='#'> 等待提交</a></li>
<li><a href='#' title=''> 等待发布</a></li>
<li><a href='#' title=''> 正式项目</a></li>
<li><a href='#' title=''> 点此新增</a></li></ul>
</div>
<div class="bartitleFAQ">
<img src="images/yuan.gif" /><span class="admintext11">下载管理</span></div>
<div class="FAQlist">
<ul>
<li><a href='#'> 等待提交</a></li>
<li><a href='#' title=''> 等待发布</a></li>
<li><a href='#' title=''> 正式项目</a></li>
<li><a href='#' title=''> 点此新增</a></li></ul>
</div>
<div class="bartitleFAQ">
<img src="images/yuan.gif" /><span class="admintext11">返回首页</span></div>
</div>
</body>
其中JQUERY脚本,只需简单的几行便可以实现想要的效果。具体代码如下所示:
复制代码 代码如下:
<script language="javascript" type="text/javascript">
$(document).ready(function () {
//将二级菜单设置为不可见
$(".FAQlist").css("display", "none");
//单击一级菜单触发的事件
$(".bartitleFAQ").click(function () {
$(".FAQlist").css("display", "none");//将二级菜单全部设置为不可见
$(this).next(".FAQlist").css("display", "block");//当前一级菜单的二级菜单设置为可见
})
})
</script>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了jQuery实现的网页竖向菜单效果代码。分享给大家供大家参考。具体如下:这是一款基于jQuery实现竖向的网页菜单代码,可折叠展开的二级网页菜单,
本文实例讲述了jquery实现的Accordion折叠面板效果代码。分享给大家供大家参考。具体如下:这是一款Accordion折叠面板,折叠菜单代码,简单Acc
本文实例讲述了JQuery实现简单的折叠菜单效果代码。分享给大家供大家参考。具体如下:运行效果截图如下:Html代码如下:菜单一111111111111菜单二2
本文实例讲述了jQuery实现折叠、展开的菜单组效果代码。分享给大家供大家参考。具体如下:这是一款jQuery实现的漂亮的竖向折叠菜单组,初次运行的时候请刷新一
本文实例讲述了jQuery采用连缀写法实现的折叠菜单效果。分享给大家供大家参考。具体如下:这是一款jQuery采用连缀写法实现的折叠菜单效果,作者是位高手啊,自