JavaScript单击div以显示隐藏的内容动画

时间：2019-05-21 13:16:42

标签： javascript css

我正在研究此JavaScript动画手风琴，试图将其移到单击Section div时的位置，一个隐藏的面板从其后面向下滑动以显示隐藏的内容。然后，再次单击该栏时，隐藏区域会向上滑动并再次变为隐藏状态。除了一些我无法解决的问题之外，这几乎可以满足我的需要。

  1. 横条之间的垂直距离应保持 在显示或隐藏隐藏区域之前和之后保持一致。 目前，它们之间存在不希望的余量。
  2. 当隐藏区域向后滑动以再次被隐藏时，需要 一直向上滑动，以使隐藏区域的边框也 消失了。

我相信我的JavaScript / css代码进行了一些小改动，可以使其正常工作，但我只是无法找到它们。

这是我的代码：

var acc = document.getElementsByClassName("bar");
var i;

// For each bar
for (i = 0; i < acc.length; i++) {

  // If this bar is clicked
  acc[i].addEventListener("click", function() {
    
    // Toggle the clicked bar to "active"
    this.classList.toggle("active");
    
    // Panel will consist of the next hidden content
    var panel = this.nextElementSibling;
    var bar = this.nextElementSibling.nextElementSibling;
    console.log("hidden height:", panel.getBoundingClientRect().height)
    
    // Use logic to change CSS styles for the selected bar
    if (panel.style.maxHeight){
      
      var closeHeight = panel.getBoundingClientRect().height;
      console.log("close height", closeHeight)
      var newHeight = (closeHeight - 80) + "px";
      panel.style.height = newHeight
      console.log("close height after adjustment", newHeight)
      
      // panel.style.border = 'none';
      panel.style.maxHeight = null;
      console.log("close maxheight", panel.style.maxHeight)
      
      // panel.style.maxHeight = '0px';
      
      // panel.style.padding = '0 18px';
      panel.style.paddingTop = '80px';
      panel.style.border = 'solid 1px #aaa';
      
      bar.style.marginTop = '-15px'
      // panel.style.border = 'none';
      
      
    } else {
      // bar.style.marginTop = '15px'
      panel.style.border = 'solid 1px #aaa';
      panel.style.paddingTop = '80px';
      panel.style.maxHeight = panel.scrollHeight + "px";
      console.log("open maxheight", panel.style.maxHeight)
      console.log("open height", panel.getBoundingClientRect().height)
    } 
  });
}
.bar {
  width: 350px;
  height: 90px;
  border-radius: 8px;
  padding: 20px;
  font-size: 24px;
  margin: 70px 15px 15px 15px;
/*   margin: 15px 15px 15px 15px; */
  z-index: -2;
  background-color: #eee;
  color: #444;
  cursor: pointer;
  border: 1px solid #444;
  text-align: left;
  outline: none;
  font-size: 16px;
/*   transition: 0.4s; */
  transition: 3.4s;
}

.active, .bar:hover {
  background-color: #ccc;
}

.hidden {
  width: 340px;
/*   height: 370px; */
/*   border: solid 1px #aaa; */
  border-radius: 8px;
  margin: -80px 0px 15px 0px;
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
/*   transition: max-height 0.2s ease-out; */
  transition: max-height 3.2s ease-out;
}
<button class="bar">Section 1</button>
<div class="hidden">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="bar">Section 2</button>
<div class="hidden">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="bar">Section 3</button>
<div class="hidden">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

这在Codepen上也可见： https://codepen.io/Chris_Nielsen/pen/Lozedd

1 个答案:

答案 0 :(得分：0)

由于CSS + javascript现在非常强大，因此不需要JQuery。

  • 我删除了很多JavaScript代码。
  • 我将.information作为类添加到所有.hidden div中。
  • 我在.hidden.information div内添加了一个额外的div。我正在用它来计算隐藏文本块的实际高度。
  • 我终于添加了一个CSS变量，因此您只需要在一个地方更改.hidden.information文本块的位置即可。

var acc = document.getElementsByClassName("bar");
var i

// For each bar
for (i = 0; i < acc.length; i++) {
  // If this bar is clicked
  acc[i].addEventListener("click", function() {
    // Toggle the clicked bar to "active"
    this.classList.toggle("active");        

    var panel = this.nextElementSibling;

    if (!panel.style.maxHeight) {  // add only once
     var elementDisplacement = getComputedStyle(panel).getPropertyValue("--element-displacement");
     elementDisplacement = Number( elementDisplacement.replace("px", "") );

     var panelChildHeight = panel.firstElementChild.getBoundingClientRect().height;
     panel.style.maxHeight = panelChildHeight + elementDisplacement + "px";
    }

    panel.classList.toggle("hidden");
  });

}
.bar {
  width: 350px;
  height: 90px;
  border-radius: 8px;
  padding: 20px;
  font-size: 24px;
  margin: 70px 15px 15px 15px;
  z-index: -2;
  background-color: #eee;
  color: #444;
  cursor: pointer;
  border: 1px solid #444;
  text-align: left;
  outline: none;
  font-size: 16px;

}

.active, .bar:hover {
  background-color: #ccc;
}

.information {
  --element-displacement: 80px;

  width: 340px;
  border-radius: 8px;
  margin: calc(-1 * var(--element-displacement)) 0px 15px 0px;
  padding: 0 18px;
  padding-top: var(--element-displacement);
  border: 1px solid #aaa;
  max-height: initial;
  overflow: hidden;
  transition: max-height 1s ease-out;
}

.hidden {
  max-height: 0px !important;
  border-color: transparent;
}
<button class="bar">Section 1</button>
<div class="hidden information">
 <div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
</div>

<button class="bar">Section 2</button>
<div class="hidden information">
 <div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor 
    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
</div>

<button class="bar">Section 3</button>
<div class="hidden information">
 <div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
 </div>
</div>

相关问题
最新问题