{"id":28141,"date":"2024-11-24T09:13:37","date_gmt":"2024-11-24T01:13:37","guid":{"rendered":"https:\/\/fwq.ai\/blog\/28141\/"},"modified":"2024-11-24T09:13:37","modified_gmt":"2024-11-24T01:13:37","slug":"%e5%a6%82%e4%bd%95%e5%ae%9e%e7%8e%b0%e7%88%b6%e5%85%83%e7%b4%a0%e5%86%85%e5%ad%90%e5%85%83%e7%b4%a0%e4%b8%a4%e8%a1%8c%e6%8e%92%e5%88%97%ef%bc%8c%e5%b9%b6%e6%b7%bb%e5%8a%a0%e7%9c%81%e7%95%a5%e5%8f%b7","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/28141\/","title":{"rendered":"\u5982\u4f55\u5b9e\u73b0\u7236\u5143\u7d20\u5185\u5b50\u5143\u7d20\u4e24\u884c\u6392\u5217\uff0c\u5e76\u6dfb\u52a0\u7701\u7565\u53f7\u6309\u94ae\u663e\u793a\u9690\u85cf\u5185\u5bb9\uff1f"},"content":{"rendered":"

\"\u5982\u4f55\u5b9e\u73b0\u7236\u5143\u7d20\u5185\u5b50\u5143\u7d20\u4e24\u884c\u6392\u5217\uff0c\u5e76\u6dfb\u52a0\u7701\u7565\u53f7\u6309\u94ae\u663e\u793a\u9690\u85cf\u5185\u5bb9\uff1f\u63d2\u56fe\"<\/p>\n

\u5982\u4f55\u5728\u7236\u5143\u7d20\u5185\u5b9e\u73b0\u5b50\u5143\u7d20\u7684\u4e24\u884c\uff1f<\/strong><\/p>\n

\u73b0\u6709\u7684\u5e03\u5c40\u4e2d\uff0c\u5b50\u5143\u7d20\u9700\u8981\u5728\u7236\u5143\u7d20\u5185\u4e24\u884c\u6392\u5217\u3002\u540c\u65f6\uff0c\u8d85\u51fa\u90e8\u5206\u4e00\u5f00\u59cb\u9700\u8981\u9690\u85cf\uff0c\u5728\u7236\u5143\u7d20\u5bb9\u5668\u5185\u663e\u793a\u7701\u7565\u53f7\u6309\u94ae\u3002\u70b9\u51fb\u6b64\u6309\u94ae\u540e\uff0c\u9690\u85cf\u90e8\u5206\u5e94\u51fa\u73b0\uff0c\u5e76\u51fa\u73b0\u6a2a\u5411\u6eda\u52a8\u6761\u3002<\/p>\n

\u89e3\u51b3\u65b9\u6848<\/strong><\/p>\n

    \n
  1. \n

    \u521b\u5efa\u7236\u5143\u7d20\u5bb9\u5668<\/strong><\/p>\n

    \u521b\u5efa\u4e00\u4e2a\u79f0\u4e3a “contner” \u7684 div\uff0c\u5e76\u8bbe\u7f6e\u5176\u5bbd\u5ea6\u3001\u9ad8\u5ea6\u548c\u8fb9\u6846\u3002\u5c06\u5176\u8bbe\u4e3a Initially Hidden\u3002<\/p>\n<\/li>\n

  2. \n

    \u521b\u5efa\u5b50\u5143\u7d20\u5bb9\u5668<\/strong><\/p>\n

    \u5728 “container” \u5185\u521b\u5efa\u53e6\u4e00\u4e2a div\uff0c\u79f0\u4e3a “flex-container”\u3002\u8bbe\u7f6e\u5176\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff0c\u5e76\u4f7f\u7528 flexbox \u5e03\u5c40\u4f7f\u5176\u5b50\u5143\u7d20\u4e24\u884c\u6392\u5217\u3002<\/p>\n<\/li>\n

  3. \n

    \u521b\u5efa\u5b50\u5143\u7d20<\/strong><\/p>\n

    \u5728 “flex-container” \u5185\u521b\u5efa\u6240\u9700\u7684\u5b50\u5143\u7d20\uff0c\u5e76\u4e3a\u5176\u8bbe\u7f6e\u6837\u5f0f\uff0c\u4f7f\u5176\u5c45\u4e2d\u4e14\u6709\u80cc\u666f\u8272\u3002<\/p>\n<\/li>\n

  4. \n

    \u521b\u5efa\u7701\u7565\u53f7\u6309\u94ae<\/strong><\/p>\n

    \u521b\u5efa\u53e6\u4e00\u4e2a div\uff0c\u79f0\u4e3a “more”\uff0c\u4f5c\u4e3a\u4e00\u4e2a\u7701\u7565\u53f7\u6309\u94ae\u3002\u5bf9\u5176\u8fdb\u884c\uff0c\u5e76\u5728\u70b9\u51fb\u65f6\u663e\u793a\u9690\u85cf\u7684\u90e8\u5206\u3002<\/p>\n<\/li>\n

  5. \n

    \u6dfb\u52a0 JavaScript<\/strong><\/p>\n

    \u4f7f\u7528 JavaScript \u76d1\u542c “more” \u6309\u94ae\u7684\u3002\u5f53\u70b9\u51fb\u8be5\u6309\u94ae\u65f6\uff0c\u9690\u85cf\u5b83\u5e76\u4e3a “container” \u6dfb\u52a0\u4e00\u4e2a “scroll” \u7c7b\uff0c\u8fd9\u5c06\u542f\u7528\u6a2a\u5411\u6eda\u52a8\u3002<\/p>\n<\/li>\n<\/ol>\n

    \u5177\u4f53\u4ee3\u7801\u5b9e\u73b0\uff1a<\/strong><\/p>\n

    HTML\uff1a<\/strong><\/p>\n

    <div id=\"container\" class=\"hidden\">\n  <div id=\"flex-container\">\n    <div class=\"item\">item1<\/div>\n    <div class=\"item\">item2<\/div>\n    <div class=\"item\">item3<\/div>\n    <div class=\"item\">item4<\/div>\n    <div class=\"item\">item5<\/div>\n    <div class=\"item\">item6<\/div>\n    <div class=\"item\">item7<\/div>\n    <div class=\"item\">item8<\/div>\n    <div class=\"item\">item9<\/div>\n    <div class=\"item\">item10<\/div>\n    <div id=\"more\">...<\/div>\n  <\/div>\n<\/div><\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    CSS\uff1a<\/strong><\/p>\n
    #container {\n  width: 400px;\n  height: 200px;\n  border: 1px solid red;\n  position: relative;\n}\n\n#container.hidden {\n  overflow-x: hidden;\n  overflow-y: hidden;\n}\n\n#container.scroll {\n  overflow-x: scroll;\n  overflow-y: hidden;\n}\n\n#flex-container {\n  width: 800px;\n  height: 200px;\n  background: pink;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-around;\n}\n\n#flex-container .item {\n  width: 150px;\n  text-align: center;\n  background: yellow;\n  height: 94px;\n  display: flex-item;\n}\n\n#more {\n  display: block;\n  position: absolute;\n  top: 160px;\n  right: 10px;\n  z-index: 5;\n  width: 80px;\n  height: 30px;\n  background: green;\n  border-radius: 5px;\n  text-align: center;\n  color: white;\n  cursor: pointer;\n}<\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    JavaScript\uff1a<\/strong><\/p>\n
    document.getElementById(\"more\").onclick = function () {\n  this.style.display = \"none\";\n  document.getElementById(\"container\").className = \"scroll\";\n};<\/pre>\n
     \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
    \u4ee5\u4e0a\u5c31\u662f\u5982\u4f55\u5b9e\u73b0\u7236\u5143\u7d20\u5185\u5b50\u5143\u7d20\u4e24\u884c\uff0c\u5e76\u6dfb\u52a0\u7701\u7565\u53f7\u6309\u94ae\u663e\u793a\u9690\u85cf\u5185\u5bb9\uff1f\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
    \u5982\u4f55\u5728\u7236\u5143\u7d20\u5185\u5b9e\u73b0\u5b50\u5143\u7d20\u7684\u4e24\u884c\uff1f \u73b0\u6709\u7684\u5e03\u5c40\u4e2d\uff0c\u5b50\u5143\u7d20\u9700\u8981\u5728\u7236\u5143\u7d20\u5185\u4e24\u884c\u6392\u5217\u3002\u540c\u65f6\uff0c\u8d85\u51fa\u90e8\u5206\u4e00\u5f00\u59cb\u9700\u8981\u9690\u85cf\uff0c\u5728\u7236\u5143\u7d20\u5bb9\u5668\u5185\u663e\u793a\u7701\u7565\u53f7\u6309\u94ae\u3002\u70b9\u51fb\u6b64\u6309\u94ae\u540e\uff0c\u9690\u85cf\u90e8\u5206\u5e94\u51fa\u73b0\uff0c\u5e76\u51fa\u73b0\u6a2a\u5411\u6eda\u52a8\u6761\u3002 \u89e3\u51b3\u65b9\u6848 \u521b\u5efa\u7236\u5143\u7d20\u5bb9\u5668 \u521b\u5efa\u4e00\u4e2a\u79f0\u4e3a “contner” \u7684 div\uff0c\u5e76\u8bbe\u7f6e\u5176\u5bbd\u5ea6\u3001\u9ad8\u5ea6\u548c\u8fb9\u6846\u3002\u5c06\u5176\u8bbe\u4e3a Initially Hidden\u3002 \u521b\u5efa\u5b50\u5143\u7d20\u5bb9\u5668 \u5728 “container” \u5185\u521b\u5efa\u53e6\u4e00\u4e2a div\uff0c\u79f0\u4e3a “flex-container”\u3002\u8bbe\u7f6e\u5176\u5bbd\u5ea6\u548c\u9ad8\u5ea6\uff0c\u5e76\u4f7f\u7528 flexbox \u5e03\u5c40\u4f7f\u5176\u5b50\u5143\u7d20\u4e24\u884c\u6392\u5217\u3002 \u521b\u5efa\u5b50\u5143\u7d20 \u5728 “flex-container” \u5185\u521b\u5efa\u6240\u9700\u7684\u5b50\u5143\u7d20\uff0c\u5e76\u4e3a\u5176\u8bbe\u7f6e\u6837\u5f0f\uff0c\u4f7f\u5176\u5c45\u4e2d\u4e14\u6709\u80cc\u666f\u8272\u3002 \u521b\u5efa\u7701\u7565\u53f7\u6309\u94ae \u521b\u5efa\u53e6\u4e00\u4e2a div\uff0c\u79f0\u4e3a “more”\uff0c\u4f5c\u4e3a\u4e00\u4e2a\u7701\u7565\u53f7\u6309\u94ae\u3002\u5bf9\u5176\u8fdb\u884c\uff0c\u5e76\u5728\u70b9\u51fb\u65f6\u663e\u793a\u9690\u85cf\u7684\u90e8\u5206\u3002 \u6dfb\u52a0 JavaScript \u4f7f\u7528 JavaScript \u76d1\u542c “more” \u6309\u94ae\u7684\u3002\u5f53\u70b9\u51fb\u8be5\u6309\u94ae\u65f6\uff0c\u9690\u85cf\u5b83\u5e76\u4e3a “container” \u6dfb\u52a0\u4e00\u4e2a “scroll” \u7c7b\uff0c\u8fd9\u5c06\u542f\u7528\u6a2a\u5411\u6eda\u52a8\u3002 \u5177\u4f53\u4ee3\u7801\u5b9e\u73b0\uff1a HTML\uff1a <div id=”container” class=”hidden”> <div id=”flex-container”> <div class=”item”>item1<\/div> <div class=”item”>item2<\/div> <div class=”item”>item3<\/div> <div class=”item”>item4<\/div> <div class=”item”>item5<\/div> <div […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-28141","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28141","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=28141"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/28141\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=28141"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=28141"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=28141"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}