创建下拉页面

Question

我正在创建一个下拉页面，如下面的示例所示：

ACF GET FIELDS IN A GROUP

这就是我希望在侧面的箭头被遮挡时显示的方式。

我如何制作这样的东西，是否有任何例子让我学习以帮助我做到这一点？

Answer 1

如果您可以使用jquery，则可以使用hasClass，addClass和removeClass来更改子菜单的高度

工作Demo。

$(".btn").click(function() {
  if ($(".menu").hasClass("dropped")) {
    $(".menu").removeClass("dropped");
  } else {
    $(".menu").addClass("dropped");
  }
});

.menu {
  height: 0;
  overflow: hidden;
  transition: all 0.5s ease 0s;
}

.dropped {
  height: inherit;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn">
  Dropdown
</button>
<div class="menu">
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
  <p>Stufss...</p>
</div>

Answer 2

使用3个div元素，您可以获得如图所示的结果。从图片看，它看起来像一个div围绕另外两个div元素，一个已经有一些信息的div元素和一个div元素，当用户按下下拉按钮时，它会通过追加/删除元素来增大/缩小。

这是一个有效的例子：

var extraInformation = document.getElementById('infoLong');
var dropdown = document.getElementById('dropdown');

// The extra info that will be appended into the infoLong div
var someHeading = document.createElement('h4');
  someHeading.innerHTML = 'Detailed Game Information';
  someHeading.style.background = '#C58AC5';
var teamOneInfo = document.createElement('p');
  teamOneInfo.innerHTML = 'Team 1: Lost';
  teamOneInfo.style.background = '#FF516B';
var teamTwoInfo = document.createElement('p');
  teamTwoInfo.innerHTML = 'Team 2: Won';
  teamTwoInfo.style.background = '#3FBFBF';

// Should add more detailed information when the dropdown button
// is pressed only if the infoLong div is empty
dropdown.addEventListener('click', function(){
  if(extraInformation.children.length === 0){
    extraInformation.appendChild(someHeading);
    extraInformation.appendChild(teamOneInfo);
    extraInformation.appendChild(teamTwoInfo);
  }else{
    while(extraInformation.firstChild){
      extraInformation.removeChild(extraInformation.firstChild);
    }
  }
});

#infoShort {
  background: #3FBFBF;
}

p {
  margin: 0;
}

h4 {
  margin: 0;
}

<div id='gameInfoContainer'>
  <div id='infoShort'>
    <h3>Game Summary</h3>
    <button id='dropdown'>Dropdown</button>
  </div>
  <div id='infoLong'></div>
</div>