前端页面的下拉伸缩的形成以及内容的显示和隐藏

<!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(); 这个也是让里面的内容隐藏,效果一样,但是我感觉
上面的好记住一点

上一篇:linux|shell脚本|文件备份并列出详细信息


下一篇:sqlite更新