Question

我正在提出一些手风琴常见问题。当我在答案部分周围添加填充时，手风琴不会一直关闭。当我删除填充物时，手风琴工作正常。问题是我要填充。

如前所述，除去填充物后，我的手风琴工作正常。重新添加填充后，折叠的答案仍会在答案中显示前几行文字。

（所讨论的手风琴是页面上的最后一个条目，标题为“ 0002”。）

body {
  font-family: 'work sans', Arial, sans-serif;
  font-size: 14px;
  color: #999;
  margin: 0px;
  padding: 0px;
  background-color: #010101;
  background: url(https://imgur.com/YRl8KNP.png) fixed center;
  background-size: cover;
  text-align: left;
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}

::-webkit-scrollbar-track {
  background-color: #000;
}

::-webkit-scrollbar-thumb {
  background-color: #010101;
}

a:link,
a:visited,
a:active {
  text-decoration: none;
  color: #999;
}

#header {
  padding: 160px;
}

.h_title {
  font: 150px 'work sans';
  color: #fff;
  margin-left: 45px;
  text-transform: uppercase;
}

.h_menu {
  border-top: 1px solid #999;
  width: 1100px;
  margin: 0 auto;
  padding: 20px 0px;
  margin-bottom: 175px;
}

.h_top {
  text-align: right;
  font: 12px 'work sans';
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 900;
}

.h_top::before {
  content: '////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////';
  font: 11px 'arial';
  font-weight: 400;
  display: block;
  color: #ff00ff;
  margin-bottom: 20px;
  letter-spacing: 4px;
}

.h_tabs input {
  display: none;
}

.h_tabs {
  position: relative;
  overflow: hidden;
  height: 230px;
  margin-top: 30px;
}

.h_tabs label {
  position: absolute;
  right: 0px;
  top: 20px;
  font: 9px 'work sans';
  letter-spacing: 5px;
  color: #fff;
  cursor: crosshair;
}

.h_tabs label:nth-of-type(2) {
  top: 90px;
}

.h_tabs label:nth-of-type(3) {
  top: 160px;
}

.h_tabs label b {
  color: #ff00ff;
  font-weight: 700;
}

.h_tabs label span {
  opacity: 0;
  transition: 0.6s;
}

.h_tabs label:after {
  content: '001';
  display: inline-block;
  overflow: hidden;
  width: 40px;
  text-align: right;
  font-eight: 100;
  color: #fff;
  transition: 0.6s;
  font-weight: bold;
}

.h_tabs label:nth-of-type(2):after {
  content: '002';
}

.h_tabs label:nth-of-type(3):after {
  content: '003';
}

.h_tabs input:checked+label span {
  opacity: 1;
  transition: 0.6s;
}

.h_tabs input:checked+label::after {
  width: 0px;
  transition: 0.6s;
}

.h_tab1,
.h_tab2 {
  width: 700px;
  position: absolute;
  left: 50px;
  top: 50px;
  opacity: 0;
}

.h_blurb {
  font: 14px 'work sans';
  color: #ccc;
  letter-spacing: 1px;
}

.h_cont {
  background: #171717;
  padding: 20px;
  margin-top: 25px;
  overflow: hidden;
  display: inline-block;
}

.h_nav a {
  display: inline-block;
  position: relative;
  width: 180px;
  margin: 0px 35px 15px 0px;
  border-bottom: 1px solid #333;
  padding: 6px;
  font: 12px 'share tech mono';
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #aaa;
}

.h_nav a::after {
  content: '';
  width: 15px;
  height: 2px;
  position: absolute;
  left: 0;
  bottom: -1px;
  background: #ff00ff;
  transition: 0.5s;
}

.h_nav a:nth-of-type(2n):after {
  background: #ff00ff;
}

.h_nav a:nth-of-type(3n):after {
  background: #ff00ff;
}

.h_nav a:hover:after {
  width: 180px;
  transition: 0.5s;
}

#htab1:checked~.h_tab1,
#htab2:checked~.h_tab2 {
  opacity: 1;
  z-index: 2;
}

#lean_overlay {
  position: fixed;
  z-index: 99;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: url(https://i.imgur.com/zdXP0Uo.jpg) fixed center;
  background-size: cover;
  display: none;
}

#Pages #wrapper {
  background: transparent;
}

#page_container {
  width: 1100px;
  overflow: hidden;
  padding: 15px 0px;
  margin: 15px 0px;
}

.page_menu {
  font: 12px 'share tech mono';
  width: 220px;
  margin-right: 50px;
  margin-left: 12px;
  float: left;
}

.page_menu a:active {
  color: #ff00ff;
}

.page_menu h1 {
  font: 17px 'work sans';
  font-weight: 700;
  text-transform: lowercase;
  color: #fff;
  margin: 30px 0px 10px 0px;
}

.page_menu h1:before {
  content: '/ ';
  font-weight: 300;
  margin-right: 5px;
  color: #ccc;
}

.page_content {
  background: #171717;
  width: 705px;
  float: left;
  outline: 1px solid rgba(255, 255, 255, 0.2);
  outline-offset: 10px;
  padding: 50px;
  text-align: justify;
  line-height: 150%;
}

.page_content h1 {
  font: 50px 'work sans';
  text-transform: uppercase;
  font-weight: 300;
  color: #fff;
  margin: 0px;
  overflow: hidden;
  text-align: left;
  display: block;
  letter-spacing: 1px;
}

.page_content h2 {
  font: 15px 'share tech mono';
  text-transform: lowercase;
  letter-spacing: 1px;
  margin: 10px 0px;
  color: #ff00ff;
}

.page_text {
  padding: 20px 50px;
}

.page_text u {
  color: #fff;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  font-size: 12px;
}

.page_em {
  margin: 30px;
  font: 10px 'share tech mono';
  line-height: 17px;
  border: 1px solid #333;
  padding: 30px;
}

.page_em u {
  color: #ff00ff;
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0px;
  line-height: 17px;
  text-transform: uppercase;
  text-decoration: none;
  font-weight: 700;
}

.page_menu ol {
  counter-reset: item;
  margin: 0px;
  padding-left: 10px;
}

.page_menu li ol {
  padding-left: 15px;
}

.page_menu b {
  color: #ff00ff;
  font-weight: bold;
}

.page_menu ol li {
  display: block;
}

.page_menu li:before {
  content: counters(item, ".") ". ";
  counter-increment: item;
  font-size: 9px;
  line-height: 25px;
  color: #ff00ff;
}

.sub_canons li {
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  font: 7px 'work sans';
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 20px 0px;
  margin-bottom: 10px;
}

.sub_canons {
  list-style-type: none;
  margin: 30px 0px;
  padding-left: 50px;
}

.sub_canons li b {
  display: block;
  font: 10px 'share tech mono';
}

.page_content h3 {
  font: 14px 'share tech mono';
  text-align: right;
  text-transform: lowercase;
  letter-spacing: 1px;
  margin: 20px 0px;
  color: #fff;
  counter-increment: faqcounter;
}

.page_content h3::before {
  content: '00' counter(faqcounter, decimal-leading-zero);
  margin-right: 12px;
  color: #ff00ff;
}

.page_content h4 {
  font: 13px 'share tech mono';
  text-transform: lowercase;
  letter-spacing: 1px;
  margin: 20px 0px;
  color: #fff;
  counter-increment: faqcounter;
}

.page_content h4::before {
  content: '00' counter(faqcounter, decimal-leading-zero);
  margin-right: 10px;
  color: #ff1053;
}

.page_content h5 {
  font: 13px 'share tech mono';
  text-transform: lowercase;
  letter-spacing: 1px;
  margin: 20px 0px;
  color: #fff;
  counter-increment: faqcounter;
}

.page_content h5::before {
  content: '00' counter(faqcounter, decimal-leading-zero);
  margin-right: 10px;
  color: #4592f7;
}

.page_content h6 {
  font: 13px 'share tech mono';
  text-transform: lowercase;
  letter-spacing: 1px;
  margin: 20px 0px;
  color: #fff;
  counter-increment: faqcounter;
}

.page_content h6::before {
  content: '00' counter(faqcounter, decimal-leading-zero);
  margin-right: 10px;
  color: #ff5f32;
}


/* Tagging */

a.user-tagged.mgroup-4 {
  color: #744dba;
}

a.user-tagged.mgroup-8 {
  color: #ff1053;
}

a.user-tagged.mgroup-6 {
  color: #4592f7;
}

a.user-tagged.mgroup-7 {
  color: #ff5f32;
}

.iconpad {
  padding: 10px;
  border: 1px solid #222;
  margin-right: 10px;
  float: left;
  margin-top: 5px;
}

.padex {
  padding: 10px;
  text-align: justify;
}

::-moz-selection {
  color: #ff00ff;
}

::selection {
  color: #ff00ff;
}

faqentry {
  margin: 0px 20px 5px 20px;
  display: block;
}

faqentry ol li {
  margin: 10px 15px 10px 10px;
  padding-left: 15px;
  font-size: 9px;
  color: #d8fe56;
}

div.toggle {
  margin: 10px 30px 20px 30px;
  padding: 40px;
  line-height: 170%!important;
  background: rgba(0, 0, 0, 0.3);
  display: block;
}

<!DOCTYPE html>
<html>

<head>
  <style>
    .accordion {
      font: 14px 'share tech mono';
      text-align: right;
      text-transform: lowercase;
      letter-spacing: 1px;
      margin: 20px 0px;
      color: #fff;
      background: none;
      border: none;
      transition: 0.4s;
    }
    
    div.panel {
      margin: 10px 30px 20px 30px;
      padding: 40px;
      line-height: 170%;
      background: rgba(0, 0, 0, 0.3);
      display: block;
      max-height: 0;
      overflow: hidden;
      transition: 0.2s ease-out;
    }
  </style>
  <link rel="shortcut icon" href="HERE">
  <link href="https://fonts.googleapis.com/css?family=Work+Sans:100,400,700,900|Share+Tech+Mono" rel="stylesheet">
  <title>STICTION</title>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
  <LINK REL=StyleSheet HREF="STICTION.css" TYPE="text/css">

</head>

<div id="header">
  <div class="h_title">stiction</div>
  <div class="h_menu">
    <div class="h_top"></div>
    <div class="h_tabs">

      <input id="htab1" type="radio" name="htabs" checked>
      <label for="htab1"><span>CANDY TEETH, NEON IDIOTS.</span> <b>/</b></label>

      <input id="htab2" type="radio" name="htabs">
      <label for="htab2"><span>OTHER LINKS</span> <b>/</b></label>

      <div class="h_tab1">
        <div class="h_blurb"><i>Welcome to the new world; myth meets the future. Where do you fit in?</i><br><br>
          <span style="text-transform: uppercase; font-family: share tech mono; font-size: 11px;">literate supernatural and cyberpunk group roleplay set in City 0215 during the year 2447.</span>
        </div>
      </div>

      <div class="h_tab2">
        <div class="h_nav">
          <a href="https://discord.gg/2Rrw9QB">DISCORD</a>
          <a href="http://GOOGLELINKHERE.com">DIRECTORY</a>
          <a href="https://open.spotify.com/playlist/1euBOWkTE7hnMCsPgBFlqM">PLAYLIST</a>


        </div>
      </div>


    </div>
  </div>

  <div id="page_container">


    <div class="page_menu">
      <ol>
        <li><a href="/PAGETITLE.html">INDEX</a></li>
      </ol>
      <h1>ESSENTIAL READS</h1>
      <ol>
        <li><a href="/PAGETITLE.html">QUICK-START GUIDE</a></li>
        <span style="color: #ff00ff; font-weight: bold;">RULES</span>
        <li><a href="/PAGETITLE.html">HISTORY</a></li>
        <li><a href="/PAGETITLE.html">SETTING</a></li>
        <li><a href="http://idiots.jcink.net/index.php?act=Pages&pid=5">SPECIES</a></li>
        <ol>
          <li><a href="/PAGETITLE.html">LIVING</a></li>
          <li><a href="/PAGETITLE.html">DECEASED</a></li>
          <li><a href="/PAGETITLE.html">PRUGATORIC</a></li>
        </ol>
      </ol>
      <h1>IN-DEPTH CONTENT</h1>
      <ol>

        <li><a href="/PAGETITLE.html">FAQ</a></li>
        <li><a href="/PAGETITLE.html">SUBPLOTS</a></li>
        <ol>
          <li><a href="/PAGETITLE.html">SUBPLOT 001</a></li>
          <li><a href="/PAGETITLE.html">SUBPLOT 002</a></li>
          <li><a href="/PAGETITLE.html">SUBPLOT 003</a></li>
        </ol>
        <li><a href="/PAGETITLE.html">OFFICIAL SERVER FACTIONS</a></li>
        <li><a href="/PAGETITLE.html">MEMBER-CREATED FACTIONS</a></li>

      </ol>
    </div>

    <div class="page_content">

      <div class="page_text" id="top">
        <h1>lore questions</h1>


        <div class="page_em"><u>A NOTE</u> This world- the world of <u style="color: #4fecc8; text-transform: uppercase; font-weight: 700; letter-spacing: 1px; font-size: 7px; font-family: 'work sans', Arial, sans-serif;">STICTION</u>- isn't just the project and product of
          the staff team. We want you to feel that you can contribute to this world! To that end, these are all questions that guests and members have asked in our Discord. Questions are either answered according to existing lore, or (in cases where the
          staff team hasn't thought of a situation or scenario) are talked out with members to come to a satisfying answer. This page is updated regularly, so make sure you keep an eye on it!
          <p>

            It's probably easiest to explore this page using the <b>CRTL+F</b> function, especially if you have specific questions!</div>

        <h2>quick links</h2>
        <faqentry id="quick links">
          <ol>
            <li><a href="#section"><u>world-building</u></a></li>
            <li><a href="#section2"><u>subplots</u></a></li>
            <ol>
              <li><a href="#wires"><u>crossed wires subplot</u></a></li>
              <li><a href="#applause"><u>live for the applause subplot</u></a></li>
              <li><a href="#blood"><u>blood and chocolate subplot</u></a></li>
            </ol>

            <li><a href="#section3"><u>species-specific</u></a>
              <ol>
                <li><a href="#abilities"><u>general abilities</u></a></li>
                <li><a href="#witches"><u>witches</u></a></li>
                <li><a href="#shifters"><u>shifters</u></a></li>
                <li><a href="#vampires"><u>vampires</u></a></li>
                <li><a href="#reapers"><u>reapers</u></a></li>
                <li><a href="#ghosts"><u>ghosts</u></a></li>
                <li><a href="#phoenixes"><u>phoenixes</u></a></li>
                <li><a href="#familiars"><u>familiars</u></a></li>
                <li><a href="#androids"><u>androids</u></a></li>
              </ol>
          </ol>
        </faqentry>


        <a name="section">&nbsp;</a>
        <Br><br>
        <h2>world-building</h2>

        <h3>context clues</h3>
        Before you get started exploring this new world, it’s helpful to keep in mind a few things for context! (It might even help you answer your own questions, who knows?) The first bit of info you’ll need is that electricity and all other forms of energy
        are obsolete; instead, the world runs on magic energy. That leads into point two, which is that supernatural, magic creatures are no longer monsters under the bed, or creatures in the shadow; they live open, public lives.<br><br> Since
        this is a cyberpunk site, it stands to reason that technology is wildly more advanced than what we have now. It’s no so advanced that interstellar travel exists, but it’s so much farther ahead that paper (and privacy, in a lot of ways) is a thing
        of the past. Every person on the planet is in some way connected to the Global Communications Lattice (or GCL) for short, and everything on the planet runs through it. As far as specific pieces of technology go, that’s largely up to you, your
        ideas, and genre standards.<br>
        <Br> It never hurts to ask an admin or run an idea by us before executing an idea, though!

        <button class="accordion"><h3>What's the primary language spoken in City 0023? What about the rest of the world?</h3></button>
        <div class="panel">English has become the primary language of most of the world, but thanks to the ease of information access, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing;
          most people can claim some form of bilingualism. English, French, and Chinese are the top three languages spoken in City 0023.</div>

        <br>
        <Br>
        <a href="#top"><u>Back to Top</u></a>
      </div>
    </div>
    <script>
      var acc = document.getElementsByClassName("accordion");
      var i;

      for (i = 0; i < acc.length; i++) {
        acc[i].addEventListener("click", function() {
          this.classList.toggle("active");
          var panel = this.nextElementSibling;
          if (panel.style.maxHeight) {
            panel.style.maxHeight = null;
          } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
          }
        });
      }
    </script>

Answer 1

要回答您发现的原始问题，只要.panel div具有顶部和底部填充，它将具有固有的最小高度，这就是为什么它没有一直闭合的原因。

在不更改现有代码过多的情况下，我想到的最简单的方法是将文本嵌套在.panel的子元素div中并移动padding属性（以及可选的还有line-height属性）到嵌套元素（我称之为.panel__content －您可以随心所欲地调用它）。

div.panel {
  margin:10px 30px 20px 30px;
  background:rgba(0,0,0,0.3);
  display:block;
  max-height: 0;
  overflow: hidden;
  transition: 0.2s ease-out;
}

.panel__content {
  padding:40px;
  line-height: 170%;
}

<div class="panel">
  <div class="panel__content">English has become the primary language of most of the world, but thanks to the ease of information access, every language (even dead languages) can be learned now! Linguistic diversity not only still exists in this world, but is flourishing; most people can claim some form of bilingualism. English, French, and Chinese are the top three languages spoken in City 0023.</div>
</div>

工作JSFidddle example

一些注意事项：

我也强烈建议您验证HTML和CSS，因为当前存在许多验证错误。最好的方法是将您的代码粘贴到W3C的在线验证器中：
- HTML验证程序： https://validator.w3.org/#validate_by_input
- CSS验证器： https://jigsaw.w3.org/css-validator/#validate_by_input
您可能不需要将div添加到.panel选择器中即可获得相同的结果。在所有条件都相同的情况下，最佳选择是使选择器尽可能短。
您可能不需要将.panel设置为display:block;，因为div的默认值为该属性值。

Answer 2

尝试添加

box-sizing: border-box;

在面板上。这应该使padding成为height的一部分。如果这会使情况稍微改变，则可能需要调整其他值。否则，您可以在关闭时将padding top和bottom设置为0，并在折叠时也将这些值过渡。

Answer 3

max-height属性覆盖了height属性，但是当css被编译且height的值应为80px时，padding的top和bottom值将添加到高度中

因此将填充设置为

<canvas id="myCanvas" width="400" height="300"></canvas>

并将您的脚本更改为

div.panel { padding: 0 40px }

为什么我的手风琴不会一直关闭？

3 个答案: