发表于： 2021-04-01 22:24:15
1 974
今天完成的事情：
基本完成任务6的样式，部分有问题需修改
1.完成css样式
2.修改侧边栏部分
<ul class="body_left_list">
<li>
<label class="body_left_list_label">
<p class="icon1"></p>
<span>信息管理</span>
<i class="icon2"></i>
</label>
</li>
<li>
<label class="body_left_list_label">
<p class="icon1"></p>
<span>article管理</span>
<i class="icon2"></i>
</label>
<!-- 子列表 -->
<ul>
<li>
<label class="body_left_list_child_label" id="demo">
<div>article列表</div>
</label>
</li>
</ul>
</li>
3.添加侧边栏的js事件
// 点击下拉菜单事件
// animate：改变元素高度
$(".body_left_list_label").on('click', function () {
$gao = $(this).parent('li').css('max-height');
if ($gao == '1500px') {
$(this).parent('li').animate({ 'max-height': '40px' });
$(this).children('i').css({
'transform': 'rotate(0)'
})
} else {
$(this).parent('li').animate({ 'max-height': '1500px' });
$(this).children('i').css({
'transform': 'rotate(-90deg)'
})
}
});
4.添加页面列表页面
function newPage() {
$('#page').append(function () {
return `
<div class="newpage">
<div class="page1">
<div class="page1-box">
<div>
<span>发布时间</span>
<input type="text">
</div>
<div>
<span>—— </span>
<input type="text">
</div>
<div>
<span>类 型</span>
<select name="" id="">
<option value="">全部</option>
</select>
</div>
<div>
<span>状 态</span>
<select name="" id="">
<option value="">全部</option>
</select>
</div>
</div>
..........................................
.........................................
}
5.为样式添加点击显示事件：
var x = 0;
demo.onclick = function () {
if (x === 0) {
newPage();
$('h1').css('display', 'none')
x++;
console.log(x)
}
}
问题：
1.错误将此部分做了，绿色侧边栏是不用做的
2.js部分遗忘，js的if事件通过查资料解决
明天的计划：
完成任务6，开始新任务
返回列表
评论