手风琴列表高度

时间：2017-04-10 21:03:52

标签： javascript html css accordion

我在下面创建了我创建的手风琴列表代码。我以为我设置所有标题框的高度是相同的，但A的高度比其余的高。我做错了什么？任何事都有帮助，欢呼。

 (function () {
  var accordions, i;
  
  // Make sure the browser supports what we are about to do.
  if (!document.querySelectorAll || !document.body.classList) return;
  
  // Using a function helps isolate each accordion from the others
  function makeAccordion(accordion) {
    var targets, currentTarget, i;
    targets = accordion.querySelectorAll('.accordion > * >h1 ');
    for(i = 0; i < targets.length; i++) {
      targets[i].addEventListener('click', function (e) {
      /*Added the code below*/
        if (e.target.parentNode.classList.contains("expanded")) {
          e.target.parentNode.classList.remove("expanded")
        } else {
        /*Else do the following, same as before */
        if (currentTarget) 
          currentTarget.classList.remove('expanded');
        
        currentTarget = this.parentNode;
        currentTarget.classList.add('expanded');
        }
      }, false);
    }

    accordion.classList.add('js');
  }

  // Find all the accordions to enable
  accordions = document.querySelectorAll('.accordion');
  console.log(accordions);
  
  // Array functions don't apply well to NodeLists
  for(i = 0; i < accordions.length; i++) {
    makeAccordion(accordions[i]);
  }
  
})();
<style>
/* Body style */ 
body {
  padding: 2%;
}
/*All paragraphs*/
.p{
padding:5px;
color:#007a5e
}
/*Accordion Movement*/
.accordion.js > * {
  overflow: hidden;
}

.accordion.js > *:not(.expanded) > *:not(h1) {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
}

.accordion.js > .expanded > *:not(h1) {
  opacity: 1;
  visibility: visible;
}

.accordion.js > * > h1 {
  cursor: pointer;
  visibility: visible;
}

.accordion.js > * > *:not(h1) {
  transition: max-height 0.5s,
    visibility 0.5s,
    margin 0.5s,
    opacity 0.5s;
}
/*Section Properties*/
.sections {
font-family:Verdana;
font-weight:lighter;
color:#5E5E5E;
text-align:center;
border-style:solid;
border-width:1px;
border-color:#E3E3E3;
padding: 5px;
background-color:#FCFCFC;
border-radius:1px;
}

.sections:hover {
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
 -o-box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
/*Green Section Properties*/
  .sections2 {
font-family:Verdana;
font-weight:lighter;
color:#FFFFFF;
text-align:center;
border-style:solid;
border-width:1px;
border-color:#E3E3E3;
padding: 5px;
background-color:#007a5e;
border-radius:1px;
}

.sections2:hover {
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
 -o-box-shadow: 0 0 10px rgba(0,0,0,0.1);
  }
/*Link Box Properties*/
  .linkboxes:link, .linkboxes:visited {
  border-color:#007a5e;
  border-style:solid;
  border-width:1px;
    background-color:#FCFCFC;
    color:#5E5E5E;
    padding: 12.5px 12.5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.linkboxes:hover, .linkboxes:active {
border-color:#007a5e;
  border-style:solid;
  border-width:1px;
    background-color: #FCFCFC;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
 -o-box-shadow: 0 0 10px rgba(0,0,0,0.1);
 }
/*Green Link Box Properties*/
   .linkboxes2:link, .linkboxes2:visited {
  border-color:#FFFFFF;
  border-style:solid;
  border-width:1px;
    background-color:#007a5e;
    color:#FFFFFF;
    padding: 12.5px 12.5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
.linkboxes2:hover, .linkboxes2:active {
border-color:#e0e0e0;
  border-style:solid;
  border-width:1px;
    background-color:#007a5e;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
 -o-box-shadow: 0 0 10px rgba(0,0,0,0.1);
 }
/*Read More Box 1*/
  .read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'February Activities';
  font-weight:bold;
  color:#007a5e
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'February Activities';
}

.read-more-trigger {
  cursor: pointer;

}
/*Read More Box 2*/
  .read-more-state2 {
  display: none;
}

.read-more-target2 {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state2:checked ~ .read-more-wrap2 .read-more-target2 {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state2 ~ .read-more-trigger2:before {
  content: 'March Activities';
  font-weight:bold;
  color:#007a5e
}

.read-more-state2:checked ~ .read-more-trigger2:before {
  content: 'March Activities';
}

.read-more-trigger2 {
  cursor: pointer;

}
/*Read More Box 3*/
  .read-more-state3 {
  display: none;
}

.read-more-target3 {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state3:checked ~ .read-more-wrap3 .read-more-target3 {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state3 ~ .read-more-trigger3:before {
  content: 'April Activities';
  font-weight:bold;
  color:#007a5e
}

.read-more-state3:checked ~ .read-more-trigger3:before {
  content: 'April Activities';
}

.read-more-trigger3 {
  cursor: pointer;

}
/*Read More Box 4*/
  .read-more-state4 {
  display: none;
}

.read-more-target4 {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state4:checked ~ .read-more-wrap4 .read-more-target4 {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state4 ~ .read-more-trigger4:before {
  content: 'May Activities';
  font-weight:bold;
  color:#007a5e
}

.read-more-state4:checked ~ .read-more-trigger4:before {
  content: 'May Activities';
}

.read-more-trigger4 {
  cursor: pointer;

}
  </style> 
<section class="accordion js"> 
   <section class="sections"> 
      <h1>A</h1>     
<div>
  <input type="checkbox" class="read-more-state" id="post-1" />
  <label for="post-1" class="read-more-trigger"></label>
  <div class="read-more-wrap">
    <div class="read-more-target"><p class="p">Feb</p>
  </div>
</div>
</div>
<br style="line-height: 15px;"/>
<div>
  <input type="checkbox" class="read-more-state2" id="post-2" />
  <label for="post-2" class="read-more-trigger2"></label>
  <div class="read-more-wrap2">
    <div class="read-more-target2">
    <p class="p">Mar<p/>
    <p class="p">Mar<p/>
    <p class="p">Mar<p/>
  </div>
</div>
</div>
<br style="line-height: 15px;"/>
<div>
  <input type="checkbox" class="read-more-state3" id="post-3" />
  <label for="post-3" class="read-more-trigger3"></label>
  <div class="read-more-wrap3">
    <div class="read-more-target3">
    <p class="p">Apr<p/>
    <p class="p">Apr<p/>
    <p class="p">Apr<p/>
  </div>
</div>
</div>
<br style="line-height: 15px;"/>
<div>
  <input type="checkbox" class="read-more-state4" id="post-4" />
  <label for="post-4" class="read-more-trigger4"></label>
  <div class="read-more-wrap4">
    <div class="read-more-target4"><p class="p">May<p/>
    <p class="p">May<p/>
    <p class="p">May</p>
  </div>
</div>
</div>
</section>


   <br style="line-height: 15px;"/> 
   <section class="sections2"> 
      <h1>
         <span class="ms-rteThemeForeColor-1-0">B</span></h1> 
      <p>All content for B.</p> 
      <p>
         <a href="/departments/humanresources/test/Pages/default.asp" target="_blank"> 
            <span class="ms-rteThemeForeColor-1-0">This is a link</span></a></p> 
      <p>
         <a class="linkboxes2" href="/departments/humanresources/test/Pages/default.asp" target="_blank"> 
            <span class="ms-rteThemeForeColor-1-0">This is also a link</span></a></p> 
      <p>More content.</p> 
      <p>
         <a class="linkboxes2" href="/departments/humanresources/test/Pages/default.asp" target="_blank"> 
            <span class="ms-rteThemeForeColor-1-0">More Links :)</span></a></p> </section> 
   <br style="line-height: 15px;"/> 
   <section class="sections"> 
      <h1>C</h1> 
      <p class="p">All content for C.</p> 
      <p>
         <a href="/departments/humanresources/test/Pages/default.asp" target="_blank">This is a link</a></p> 
      <p>
         <a class="linkboxes" href="/departments/humanresources/test/Pages/default.asp" target="_blank">This is also a link</a></p> 
      <p class="p">More content.</p> 
      <p>
         <a class="linkboxes" href="/departments/humanresources/test/Pages/default.asp" target="_blank">More Links :)</a></p> </section>
 </section>

2 个答案:

答案 0 :(得分：0)

<br style="line-height: 15px;"/>＆＃39>之间的该部分中有div个元素。移除它并使用margin-bottom: 15px上的div代替。

然后您还有一些其他问题，例如padding: 5px上的.p - 将其更改为margin。

你从一些视觉上隐藏的元素溢出，给它们一个很小的高度，所以overflow: hidden添加到.accordion.js > *:not(.expanded) > *:not(h1)

＆＃13;
＆＃13; 
(function () {
  var accordions, i;
  
  // Make sure the browser supports what we are about to do.
  if (!document.querySelectorAll || !document.body.classList) return;
  
  // Using a function helps isolate each accordion from the others
  function makeAccordion(accordion) {
    var targets, currentTarget, i;
    targets = accordion.querySelectorAll('.accordion > * >h1 ');
    for(i = 0; i < targets.length; i++) {
      targets[i].addEventListener('click', function (e) {
      /*Added the code below*/
        if (e.target.parentNode.classList.contains("expanded")) {
          e.target.parentNode.classList.remove("expanded")
        } else {
        /*Else do the following, same as before */
        if (currentTarget) 
          currentTarget.classList.remove('expanded');
        
        currentTarget = this.parentNode;
        currentTarget.classList.add('expanded');
        }
      }, false);
    }

    accordion.classList.add('js');
  }

  // Find all the accordions to enable
  accordions = document.querySelectorAll('.accordion');
  console.log(accordions);
  
  // Array functions don't apply well to NodeLists
  for(i = 0; i < accordions.length; i++) {
    makeAccordion(accordions[i]);
  }
  
})();
＆＃13; 
/* Body style */

body {
  padding: 2%;
}


/*All paragraphs*/

.p {
  margin: 5px;
  color: #007a5e;
}


/*Accordion Movement*/

.accordion.js > * {
  overflow: hidden;
}

.accordion.js > *:not(.expanded) > *:not(h1) {
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}

.accordion.js > .expanded > *:not(h1) {
  opacity: 1;
  visibility: visible;
}

.accordion.js > * > h1 {
  cursor: pointer;
  visibility: visible;
}

.accordion.js > * > *:not(h1) {
  transition: max-height 0.5s, visibility 0.5s, margin 0.5s, opacity 0.5s;
}


/*Section Properties*/

.sections {
  font-family: Verdana;
  font-weight: lighter;
  color: #5E5E5E;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #E3E3E3;
  padding: 5px;
  background-color: #FCFCFC;
  border-radius: 1px;
}

.sections:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


/*Green Section Properties*/

.sections2 {
  font-family: Verdana;
  font-weight: lighter;
  color: #FFFFFF;
  text-align: center;
  border-style: solid;
  border-width: 1px;
  border-color: #E3E3E3;
  padding: 5px;
  background-color: #007a5e;
  border-radius: 1px;
}

.sections2:hover {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


/*Link Box Properties*/

.linkboxes:link,
.linkboxes:visited {
  border-color: #007a5e;
  border-style: solid;
  border-width: 1px;
  background-color: #FCFCFC;
  color: #5E5E5E;
  padding: 12.5px 12.5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.linkboxes:hover,
.linkboxes:active {
  border-color: #007a5e;
  border-style: solid;
  border-width: 1px;
  background-color: #FCFCFC;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


/*Green Link Box Properties*/

.linkboxes2:link,
.linkboxes2:visited {
  border-color: #FFFFFF;
  border-style: solid;
  border-width: 1px;
  background-color: #007a5e;
  color: #FFFFFF;
  padding: 12.5px 12.5px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

.linkboxes2:hover,
.linkboxes2:active {
  border-color: #e0e0e0;
  border-style: solid;
  border-width: 1px;
  background-color: #007a5e;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  -o-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


/*Read More Box 1*/

.read-more-state {
  display: none;
}

.read-more-target {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
  content: 'February Activities';
  font-weight: bold;
  color: #007a5e
}

.read-more-state:checked ~ .read-more-trigger:before {
  content: 'February Activities';
}

.read-more-trigger {
  cursor: pointer;
}


/*Read More Box 2*/

.read-more-state2 {
  display: none;
}

.read-more-target2 {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state2:checked ~ .read-more-wrap2 .read-more-target2 {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state2 ~ .read-more-trigger2:before {
  content: 'March Activities';
  font-weight: bold;
  color: #007a5e
}

.read-more-state2:checked ~ .read-more-trigger2:before {
  content: 'March Activities';
}

.read-more-trigger2 {
  cursor: pointer;
}


/*Read More Box 3*/

.read-more-state3 {
  display: none;
}

.read-more-target3 {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state3:checked ~ .read-more-wrap3 .read-more-target3 {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state3 ~ .read-more-trigger3:before {
  content: 'April Activities';
  font-weight: bold;
  color: #007a5e
}

.read-more-state3:checked ~ .read-more-trigger3:before {
  content: 'April Activities';
}

.read-more-trigger3 {
  cursor: pointer;
}


/*Read More Box 4*/

.read-more-state4 {
  display: none;
}

.read-more-target4 {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;
}

.read-more-state4:checked ~ .read-more-wrap4 .read-more-target4 {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.read-more-state4 ~ .read-more-trigger4:before {
  content: 'May Activities';
  font-weight: bold;
  color: #007a5e
}

.read-more-state4:checked ~ .read-more-trigger4:before {
  content: 'May Activities';
}

.read-more-trigger4 {
  cursor: pointer;
}

.accordion > section > div {
  margin-bottom: 15px;
}
＆＃13; 
<section class="accordion js">
  <section class="sections">
    <h1>A</h1>
    <div>
      <input type="checkbox" class="read-more-state" id="post-1" />
      <label for="post-1" class="read-more-trigger"></label>
      <div class="read-more-wrap">
        <div class="read-more-target">
          <p class="p">Feb</p>
        </div>
      </div>
    </div>
    <div>
      <input type="checkbox" class="read-more-state2" id="post-2" />
      <label for="post-2" class="read-more-trigger2"></label>
      <div class="read-more-wrap2">
        <div class="read-more-target2">
          <p class="p">Mar
            <p/>
            <p class="p">Mar
              <p/>
              <p class="p">Mar
                <p/>
        </div>
      </div>
    </div>
    <div>
      <input type="checkbox" class="read-more-state3" id="post-3" />
      <label for="post-3" class="read-more-trigger3"></label>
      <div class="read-more-wrap3">
        <div class="read-more-target3">
          <p class="p">Apr
            <p/>
            <p class="p">Apr
              <p/>
              <p class="p">Apr
                <p/>
        </div>
      </div>
    </div>
    <div>
      <input type="checkbox" class="read-more-state4" id="post-4" />
      <label for="post-4" class="read-more-trigger4"></label>
      <div class="read-more-wrap4">
        <div class="read-more-target4">
          <p class="p">May
            <p/>
            <p class="p">May
              <p/>
              <p class="p">May</p>
        </div>
      </div>
    </div>
  </section>


  <br style="line-height: 15px;" />
  <section class="sections2">
    <h1>
         <span class="ms-rteThemeForeColor-1-0">B</span></h1>
    <p>All content for B.</p>
    <p>
      <a href="/departments/humanresources/test/Pages/default.asp" target="_blank">
        <span class="ms-rteThemeForeColor-1-0">This is a link</span></a>
    </p>
    <p>
      <a class="linkboxes2" href="/departments/humanresources/test/Pages/default.asp" target="_blank">
        <span class="ms-rteThemeForeColor-1-0">This is also a link</span></a>
    </p>
    <p>More content.</p>
    <p>
      <a class="linkboxes2" href="/departments/humanresources/test/Pages/default.asp" target="_blank">
        <span class="ms-rteThemeForeColor-1-0">More Links :)</span></a>
    </p>
  </section>
  <br style="line-height: 15px;" />
  <section class="sections">
    <h1>C</h1>
    <p class="p">All content for C.</p>
    <p>
      <a href="/departments/humanresources/test/Pages/default.asp" target="_blank">This is a link</a></p>
    <p>
      <a class="linkboxes" href="/departments/humanresources/test/Pages/default.asp" target="_blank">This is also a link</a></p>
    <p class="p">More content.</p>
    <p>
      <a class="linkboxes" href="/departments/humanresources/test/Pages/default.asp" target="_blank">More Links :)</a></p>
  </section>
</section>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

您手风琴中隐藏的div正在使用visiblity: hidden，它会隐藏内容，但不会将其删除。它就像在那里有内容，但你无法看到它......它仍占用空间。而不是切换visibility和opacity，将display属性从block切换到none，然后您就不必跳过一堆css hoops。

相关问题
最新问题