发表于： 2018-12-24 18:12:16
1 818
今天完成的事
1 导航栏实现点击 隐藏 点击 出现 方法如下
1 在需要隐藏的元素同级加 input 这个代码
<input type="checkbox" id="danji">
2 添加css代码实现隐藏 意思就是 让这个元素 隐藏
height: 0px; overflow: hidden;
3 input在选中状态先下 元素 显示 意思就是 input选中状态下 p元素 显示
input:checked~p {
overflow: visible;
}
4 把input元素绑定在label元素上 意思就是 这个功能可以绑定任何元素上实现
<label class="num1" for="danji"> 这里添加你想要控制它的元素 </label>
5 注意 input必须放在 需要隐藏的元素同级 inputy的id 必须和 label的 for相同
2 实现点击隐藏 点击出现代码总体如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
p {
border: 1px solid red;
height: 0px;
overflow: hidden;
}
input:checked~p {
overflow: visible;
}
</style>
</head>
<body>
<label for="dianji"> 点击</label>
<div>
<input type="checkbox" id="dianji">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Commodi optio sed eligendi repudiandae. Sequi debitis, totam, praesentium laudantium numquam eum voluptatibus non eligendi saepe animi quibusdam delectus ab nostrum, perferendis libero eaque magnam officia aperiam! Voluptate nam dolorem eligendi, quasi harum deserunt. Quibusdam eveniet delectus optio deleniti maiores libero incidunt?
</p>
</div>
</body>
</html>
2 明天计划的事
1 修改一下 导航的一个错误 div会晃动的问题
2 做个导航组件库
返回列表
评论