html - 在溢出设置为隐藏的父级中下拉 div

Question

我为父 div 获得了以下信息：

#parent {
  overflow: hidden;
}

以下是内部 div，它是一个下拉 div。单击显示时，不显示位于父 div 下方的下拉部分（仅显示一半）。

#dropDown {

display: none;
  position: absolute;
}

这是我的 HTML 代码：

<div id='parent'>


<ul>
    <li id="exportWrapper">
        <button onclick="return false" id="triggerDropDown">trigger </button>
       <div id="dropDown">
         <span  class="one"> link one</span><br>
         <span  class="two"> link two</span>
       </div>
    </li>
</ul>
</div>

Answer 1

我没有看到任何称为#dropDown css 的东西。我将 div#exportDivContent 更改为 div#dropDown 并隐藏了两个 . 这是你想做的吗？

<ul> <li id="exportWrapper"> <button onclick="return false" id="triggerDropDown">trigger </button> <div id="dropDown"> <span class="one"> link one</span><br> <span class="two"> link two</span> </div> </li> </ul>

Answer 2

好吧，我认为这里的问题是您设置overflow: hidden为parentdiv。所以，起初没有溢出，按钮显示正确。然后，当您单击按钮时，它的高度会增加，因为有一个下拉列表，因此它只显示列表的一半。

尝试删除overflow: hidden[Edit] : 或者这个：

<button onclick="a_function()" id="triggerDropDown">trigger </button>
   <div id="dropDown">
     <span  class="one"> link one</span><br>
     <span  class="two"> link two</span>
   </div>
<script>
   function a_function(){
      document.getElementById("parent").style.height = "60px";
   }
</script>