折叠的jquery插件

最新推荐文章于 2024-03-09 15:44:15 发布

zyu67

最新推荐文章于 2024-03-09 15:44:15 发布

阅读量495

点赞数

分类专栏： js jquery

本文链接：https://blog.csdn.net/zyu67/article/details/78894532

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

jquery

10 篇文章 0 订阅

订阅专栏

jquery.cms.core.js

(function($){

   $.fn.myaccordion =function(opts){
       var settings= $.extend({
               selectedClz:"navSelected",
               titleTagName:"h3",
       },opts||{});
       var titleNode=$(this).find("ul>"+settings.titleTagName);
       var selectedNode=$(this).find("ul."+settings.selectedClz+">"+settings.titleTagName);
       titleNode.css("cursor","pointer");
       titleNode.nextAll().css("display","none");
       selectedNode.nextAll().css("display","block");
       $(this).find(settings.titleTagName).css("cursor","pointer");
       titleNode.click(function(){
           var checked= $(this).parent().hasClass("navSelected");
           if(checked){
               $(this).parent().removeClass(settings.selectedClz);
               $(this).nextAll().slideUp()
           }else{
               $(this).parent().addClass(settings.selectedClz);
               $(this).nextAll().slideDown()

           }
       })


   }

})(jQuery);

css 样式

*{
   margin:0px;
   padding:0px;
}
/*--------------------------left begin--------------------------------------*/
#left{
   width:164px;
   font-size:12px;
/*   border-right:1px solid #555;*/
}
ul h3.navTitle,#content h3{
   height:28px;
   background:url("img/nav_title_bg.jpg") repeat-x;
   border-top:1px solid #7da2bf;
   border-bottom:1px solid #1d486a;
   color:#fff;
   font-weight:normal;
   font-size:12px;
}
ul.navSelected span.navTilteTxt{
   position:relative;
   left:20px;
   top:7px;
   background:url("img/nav_title_icon_selected.jpg") no-repeat;
   padding-left:20px;
}
ul span.navTilteTxt{
   position:relative;
   left:20px;
   top:7px;
   background:url("img/nav_title_icon.jpg") no-repeat;
   padding-left:20px;
}
ul li.navChild{
   margin:8px 0px;
   margin-left:20px;
   list-style:none;
   background:url("img/nav_child_icon.jpg")no-repeat;
   background-position:0 50%;
}
ul li.navChild a:link,ul li.navChild a:visited{
   margin-left:20px;
   text-decoration:none;
   color:#4d5255;
}
ul li.navChild a:hover{
   text-decoration:underline;
   color:#f00;
}
/*--------------------------left begin--------------------------------------*/

html

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>欢迎使用Java第二课堂后台管理程序</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/resources/css/admin/main.css"/>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/resources/js/core/jquery.cms.core.js"></script>
<script type="text/javascript">
/*function initNav(){
   $(".navMenu li").css("display","none");
   $(".navSelected").css("display","block");
}
$(function(){
   $(".navTitle").mouseover(function(){
       $(this).css("cursor","pointer");
   });
   initNav();
   $(".navTitle").click(function(){
       var checked =$(this).parent().hasClass("navSelected");
       if(checked){
           $(this).parent().removeClass("navSelected");
           $(this).nextAll().slideUp();
       }else{
           $(this).parent().addClass("navSelected");
           $(this).nextAll().slideDown();
       }
   })
})*/
$(function(){
   $("#left").myaccordion();
})
</script>
</head>
<body>
<div id="left">
    <ul class="navMenu navSelected">
        <h3 class="navTitle">
            <span class="navTilteTxt">用户管理</span>
        </h3>
        <li class="navChild">
            <a href="<%=request.getContextPath() %>/admin/user/users" target="content">用户信息管理</a>
        </li>
        <li class="navChild">
            <a href="<%=request.getContextPath() %>/admin/group/groups" target="content">用户组管理</a>
        </li>
        <li class="navChild">
            <a href="<%=request.getContextPath() %>/admin/role/roles" target="content">用户角色管理</a>
        </li>
    </ul>
    <ul class="navMenu navSelected">
        <h3 class="navTitle">
            <span class="navTilteTxt">文章管理</span>
        </h3>
        <li class="navChild">
            <a href="<%=request.getContextPath() %>/admin/channel/cm" target="content">栏目信息管理</a>
        </li>
        <li class="navChild">
            <a href="<%=request.getContextPath() %>/admin/article/publishs" target="content">文章信息管理</a>
        </li>
    </ul>
    <ul class="navMenu">
        <h3 class="navTitle">
            <span class="navTilteTxt">系统配置</span>
        </h3>
        <li class="navChild">
            <a href="<%=request.getContextPath() %>/admin/hyperlink/hyperlinks" target="content">超级链接管理</a>
        </li>
        <li class="navChild">
            <a href="<%=request.getContextPath() %>/admin/webInfo/showWebInfo" target="content">网站信息管理</a>
        </li>
        <li class="navChild">
            <a href="<%=request.getContextPath() %>/admin/newImgManage/newImgManage" target="content">首页图片管理</a>
        </li>
        <li class="navChild">
            <a href="<%=request.getContextPath() %>/admin/backup/sqls" target="content">网站数据备份</a>
        </li>
        <li class="navChild">
            <a href="<%=request.getContextPath() %>/admin/systemClean/articleList" target="content">系统清理管理</a>
        </li>

    </ul>

</div>
</body>
</html>