css
/*展示内容区开始*/
.content{
width: 100%;
min-width: 1200px;
min-height:783px;
}
/*内容居中区域开始*/
.content-auto{
width:1200px;
min-width:1200px;
min-height:783px;
margin: auto;
position: relative;
}
/*内容左侧菜单开始*/
.content-auto-ul{
width:218px ;
min-height:591px;
position: absolute;
top:-111px;
left: 0px;
}
.content-auto-top{
width:218px;
height:111px;
line-height: 111px;
font-size:28px ;
font-weight: 500;
color: white;
text-align: center;
background: rgba(1,86,40,0.9);
}
.accordion>.content-top-p{
width: 211px;
height: 68px;
line-height: 68px;
background: #f1f1f1;
border-left: 7px solid #d0cece;
margin-bottom: 1px;
}
.accordion>p.content-ai-active{
border-left:7px solid #0f904a;
color:#0f904a ;
}
.content-auto-text{
padding:0px 25px;
margin:0px 0px 0px 25px;
display:inline-block;
float: left;
color: #333333;
font-size: 16px;
}
.content-top-span{
width:22px;
height:22px;
margin-top:23px;
float: left;
display:inline-block;
background: url("../img/三角形-left.png") no-repeat 0px 0px;
background-size: 100% 100%;
}
.span-rotate{
transform:rotate(-90deg);
/*-ms-transform:rotate(-90deg); !* Internet Explorer *!*/
/*-moz-transform:rotate(-90deg); !* Firefox *!*/
/*-webkit-transform:rotate(-90deg); !* Safari 和 Chrome *!*/
/*-o-transform:rotate(-90deg); !* Opera *!*/
}
.accordion>.auto-ul{
width: 218px;
display: none;
}
.accordion>.auto-ul li{
text-align: center;
width: 211px;
height: 62px;
line-height: 62px;
color: #333333;
font-size: 16px;
background:#e4e4e4;
border-left: 7px solid #d0cece;
margin-top: 1px;
}
.content-auto-div{
width:908px;
float: right;
min-height:330px;
margin-top:20px ;
border: 1px solid;
}
/*展示内容区结束*/
html
<div class="content">
<!--内容居中开始-->
<div class="content-auto">
<!--内容左侧菜单栏开始-->
<div class="content-auto-ul">
<p class="content-auto-top">附中概括</p>
<div class="accordion">
<p class="content-top-p">
<span class="content-auto-text">学校简介</span>
<span class="content-top-span"></span>
</p>
<ul class="auto-ul">
<li class="auto-ul-li">校长寄语</li>
<li class="auto-ul-li">办学理念</li>
<li class="auto-ul-li">现任领导</li>
<li class="auto-ul-li">历任领导</li>
<li class="auto-ul-li">学校纪事</li>
<li class="auto-ul-li">校史展览</li>
</ul>
<p class="content-top-p">
<span class="content-auto-text">文明校园</span>
<span class="content-top-span"></span>
</p>
<ul class="auto-ul">
<li class="auto-ul-li">数字智慧</li>
<li class="auto-ul-li">运动健康</li>
<li class="auto-ul-li">洁净美丽</li>
<li class="auto-ul-li">安全文明</li>
</ul>
<p class="content-top-p">
<span class="content-auto-text">学校荣誉</span>
<span class="content-top-span"></span>
</p>
<ul class="auto-ul">
<li class="auto-ul-li">学校荣誉</li>
<li class="auto-ul-li">教学</li>
<li class="auto-ul-li">科研</li>
<li class="auto-ul-li">文体</li>
<li class="auto-ul-li">管理</li>
</ul>
<p class="content-top-p">
<span class="content-auto-text">学校标识</span>
<span class="content-top-span"></span>
</p>
<ul class="auto-ul">
<li class="auto-ul-li">校徽</li>
<li class="auto-ul-li">校歌</li>
<li class="auto-ul-li">校旗</li>
<li class="auto-ul-li">校训</li>
<li class="auto-ul-li">LOGO</li>
</ul>
</div>
</div>
<!--内容左侧菜单栏结束-->
<!--内容右侧开始-->
<div class="content-auto-div">
</div>
<!--内容右侧结束-->
</div>
<!--内容居中结束-->
</div>
js
//1.只是单纯的一个点击以后就可以变色
// $(".content-auto-item").each(function (i,e) {
// $(this).click(function () {
// $(this).addClass("content-ai-active").siblings().removeClass("content-ai-active")
// })
// var clear
// // $(this).hover(function () {
// // $(this).addClass("content-ai-active").siblings().removeClass("content-ai-active")
// // var active=$(this).hasClass("content-ai-active");
// // if(active===true){
// // $(this).click(function () {
// // $(this).addClass("content-ai-active").siblings().removeClass("content-ai-active");
// // clearInterval(clear)
// // })
// // }
// // },function () {
// // clear()
// // clear=setInterval(function () {
// // $(this).removeClass("content-ai-active")
// //
// // },100)
// //
// // })
//
// })
// 现任领导 点击二级菜单出三级菜单
//2.点击一处展开 而另一处合着
$(".accordion>p").each(function (i, e) {
$(this).click(function () {
$(this).addClass("content-ai-active").siblings(".content-top-p").removeClass("content-ai-active")
$(this).find(".content-top-span").addClass("span-rotate").siblings().removeClass("span-rotate")
$(".auto-ul").eq(i).slideDown("slow").siblings(".auto-ul").slideUp("slow");
})
})
//
//3.点击一个展开一个
// $(".accordion>p").click(function () {
// if ($(this).hasClass("content-ai-active")) {
// // $(this).find("em").removeClass("icon-jian").addClass("icon-add");
// $(this).removeClass("content-ai-active").next().slideUp();
// $(this).find(".content-top-span").removeClass("span-rotate")
// }
// else {
// // $(this).find("em").removeClass("icon-add").addClass("icon-jian");
// $(this).addClass("content-ai-active").next().slideDown();
// $(this).find(".content-top-span").addClass("span-rotate")
//
// }
// });
//现任领导 content-auto-item 左侧菜单部分结束
