<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="index.css" />
<link
rel="stylesheet"
href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css"
/>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<title>bilibili</title>
<style>
.dropdown-menu {
min-width: 76px;
left: 7px;
text-align: center;
}
.dropdown-menu > li > a {
padding: 6px 14px;
}
</style>
</head>
<body>
<div class="header">
<div>
<ul class="headone">
<li><img src="bilibili.png" alt="" /></li>
<li>主站</li>
<li>番剧</li>
<li>游戏中心</li>
<li>直播</li>
<li>会员购</li>
<li>漫画</li>
<li>赛事</li>
<li>下载app</li>
</ul>
</div>
</div>
<div class="content">
<div class="one">
<iframe
src="https://player.bilibili.com/player.html?aid=806780281&bvid=BV1r34y1d7oG&cid=445497666&page=1"
scrolling="no"
border="0"
frameborder="no"
framespacing="0"
allowfullscreen="true"
width="638"
height="477"
>
</iframe>
</div>
<div class="two">
<div class="two_one">
<div class="touxiang">
<img
src=" https://i1.hdslb.com/bfs/face/c7fb5da587c2ec6b56ad47579933fda34c000457.jpg@256w_256h_1o.webp"
alt=""
/>
<!-- <span class="bili-avatar-icon--personal"></span> -->
</div>
<div>
<span style="color: #fb7299; font-size: 14px">盗月社食遇记 </span
><span style="font-size: 12px">发消息</span>
<div style="font-size: 12px; color: #999">
<span>心里有光，哪里都美</span>
</div>
<input
type="button"
class="btn btn-primary dropdown-toggle btn-sm"
data-toggle="dropdown"
value="为它充电"
style="background-color: skyblue; border-color: pink"
/>
<!-- <input
type="button"
value="关注625.4万"
onclick="guzhu()"
id="gz"
/> -->
<!-- <button onclick="guzhu()" id="gz">关注625.4万</button> -->
<div class="btn-group">
<input
type="button"
class="btn btn-primary dropdown-toggle btn-sm"
data-toggle="dropdown"
value="关注625.4万"
style="background-color: pink; border-color: pink"
id="gz"
onclick="guzhu()"
/>
<!-- <span class="caret"></span> -->
<ul
class="dropdown-menu"
role="menu"
style="width: 12px; font-size: 12px"
>
<li>
<a href="#">设置分组</a>
</li>
<li><a href="#">取消关注</a></li>
</ul>
</div>
</div>
</div>
<div class="two_two">
<div class="dmlb">弹幕列表</div>
<div class="zk">展开</div>
</div>
<div
id="two_three"
style="background: #98bf21; height: 0px; width: 250px"
>
<div style="display: none" id="zhankaineirong">
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
<div>今天又是开心的一天呢</div>
</div>
</div>
</div>
</div>
</body>
<script>
var num = 0;
function guzhu() {
// console.log($("#gz").attr("value"));
// console.log($("#gz").val());
$("#gz").val("已关注700万");
// $("#gz").attr("disabled", true);
// var text = $("#gz").val();
// console.log($("#gz").val());
// if (text == "已关注700万") {
// $("#gz").attr("disabled", true);
// }
}
$(".zk").click(function () {
// console.log($(".zk").text());
if ($(".zk").text() == "收缩") {
$("#two_three").animate({ height: "0px", width: "250px" });
// $("#zhankaineirong").hide();
$("#zhankaineirong").toggle();
$(".zk").text("展开");
} else {
$("#two_three").animate({ height: "300px", width: "250px" });
$("#zhankaineirong").show();
// console.log($("#zhankaineirong").text());
// $("#zhankaineirong").attr("display", "show");
$(".zk").text("收缩");
}
});
</script>
</html>
$("#zhankaineirong").hide(); 让里面的内容隐藏
$("#zhankaineirong").toggle(); 这个也是让里面的内容隐藏，效果一样，但是我感觉
上面的好记住一点