<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="http://lib.baomitu.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<style>
/*初始化css*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
body {
background: #fff;
color: #555;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}
td, th, caption {
font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
font-size: 100%;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
a {
color: #555;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
img {
border: none;
}
ol, ul, li {
list-style: none;
}
input, textarea, select, button {
font: 14px Verdana, Helvetica, Arial, sans-serif;
}
table {
border-collapse: collapse;
}
html {
overflow-y: scroll;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
*zoom: 1;
}
/*初始化css*/
/*左边折叠菜单里面的样式*/
.item1 {
/*border: 1px solid red;*/
width: 230px;
/*height: 500px;*/
height: 100%;
flex: 0 0 auto;
background-color: #ececec;
}
.Fold_demo .fold_item {
position: relative;
}
.Fold_demo {
padding-top: 24px;
padding-left: 20px;
padding-bottom: 24px;
}
.Fold_demo .fold_item h4 {
margin: 0;
font-weight: normal;
position: relative;
font-size: 13px;
line-height: 22px;
padding: 4px 0px;
background-color: #eee;
cursor: pointer;
padding-right: 5px
}
.Fold_demo .fold_item .info {
display: none;
padding-left: 30px;
}
.Fold_demo .fold_item .info ul li span {
font-family: "PingFang SC";
font-size: 10px;
color: #666666;
}
.Fold_demo .fold_item .info ul li span:hover {
cursor: pointer;
font-family: "PingFang SC";
font-size: 13px;
color: #3b8ede;
}
.glyphicon {
line-height: 22px;
font-size: 10px;
}
/*左边折叠菜单里面的样式*/
</style>
<body>
<div class="item item1">
<ul id="Fold_left" class="Fold_demo">
<li class="fold_item">
<h4><i class="glyphicon glyphicon-triangle-right pull-left"></i> 第1天 认识一下软件<b></b></h4>
<div class="info">
<ul>
<li><img
src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_20.gif') }}"
alt=""> <span>软件是什么</span>
</li>
<li><img
src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}"
alt=""> <span>第一段代码("hello world")</span>
</li>
<li><img
src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}"
alt=""> <span>错误提示</span>
</li>
<li><img
src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}"
alt=""> <span>注释</span>
</li>
</ul>
</div>
</li>
<li class="fold_item">
<h4><i class="glyphicon glyphicon-triangle-right pull-left"></i> 第2天 变量和赋值<b></b></h4>
<div class="info">
<ul>
<li><img
src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_20.gif') }}"
alt=""> <span>变量</span>
</li>
<li><img
src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}"
alt=""> <span>数据类型</span>
</li>
<li><img
src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}"
alt=""> <span>赋值测试</span>
</li>
</ul>
</div>
</li>
<li class="fold_item">
<h4><i class="glyphicon glyphicon-triangle-right pull-left"></i> 第3天 四则运算
<b></b></h4>
<div class="info">
<ul>
<li><img
src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_20.gif') }}"
alt=""> <span>逻辑运算(四则运算）</span>
</li>
<li><img
src="{{ static_url('Home/images/a6be314b039b50e5b7a54ba9beb14568004f00d511a009-sJOFQV_fw658_23.gif') }}"
alt=""> <span>计算长方形和正方形的面积</span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</body>
</html>
<script src="http://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
<script>
jQuery.Fold_demo = function (obj, obj_c, speed, obj_type, Event) {
if (obj_type == 2) {
// $(obj+":first").find("b").html("-");
$(obj + ":first").children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-bottom")
$(obj_c + ":first").show()
}
$(obj).bind(Event, function () {
if ($(this).next().is(":visible")) {
if (obj_type == 2) {
return false
}
else {
$(this).next().slideUp(speed).end().removeClass("selected");
// $(this).find("b").html("+")
$(this).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-right")
}
}
else {
if (obj_type == 3) {
$(this).next().slideDown(speed).end().addClass("selected");
// $(this).find("b").html("-")
$(this).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-bottom")
} else {
$(obj_c).slideUp(speed);
$(obj).removeClass("selected");
// $(obj).find("b").html("+");
$(obj).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-right")
$(this).next().slideDown(speed).end().addClass("selected");
// $(this).find("b").html("-")
$(this).children("i").removeClass("glyphicon glyphicon-triangle-right glyphicon-triangle-bottom").addClass("glyphicon glyphicon-triangle-bottom")
}
}
})
}
$(function () {
$.Fold_demo("#Fold_left .fold_item h4", "#Fold_left .fold_item .info", "fast", 1, "click");
/*5个参数顺序不可打乱，分别是：相应区,隐藏显示的内容,速度,类型,事件*/
/*三种类型：分别对应的参数：
1 只打开一个，可以全部关闭
2 必须有一个打开
3 可打开多个
*/
});
</script>
笔记：tornado中用的基于hui和bootstrap改的折叠菜单终极版（看注释）
猜你喜欢
转载自blog.csdn.net/tcf_jingfeng/article/details/80251067
今日推荐
周排行