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设置为parent div。因此，首先没有溢出，按钮显示正常。然后，当您单击按钮时，它的高度会增加，因为有一个下拉列表，因此它只显示列表的一半。

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

<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>

将溢出设置为隐藏的父级内的div下拉

2 个答案: