展开下拉菜单时如何移动元素 [英] How to move elements when drop down is expanded

问题描述

我目前正在完成一项任务，我需要在下拉菜单展开后，下拉下方的元素不应该隐藏。

他们应该向下移动随着下拉的扩大，并随着下降的展开而上移。

这可能吗？

我有以下是一个示例代码：

 < select id =test> 
< option value =a> A< / option> 
< option value =b> B< / option> 
< option value =c> C< / option> 
< option value =d> D< / option> 
< option value =e> E< / option> 
< / select> 
< div> abc< / div> 
  

如果下拉列表< abc

一旦下拉展开，我希望div 展开展开，以便它不会隐藏在下拉选项后面。 abc即可恢复到原来的位置。 解决方案

隐藏在下拉菜单中，然后你有两种方法去。

1. 将onClick事件附加到下拉列表中， （包含其他元素）的高度css属性或选择框的容器从自动增加到所需的像素量。

用div / ul显示和隐藏子元素在CSS中实现下拉菜单。您可以采用与网站标题下拉菜单相同的方法。这将推动所有内容。

I am currently working on a task where I am required that after the drop down is expanded the elements below the dropdown should not get hidden.

They should move down as the drop down expands and move up as the drop down unexpand.

Is this possible?

I have a sample code below:

<select id="test">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
<option value="d">D</option>
<option value="e">E</option>
</select>
<div>abc</div>

I want div "abc" to move down when the dropdown is expanded so that it doesnt get hidden behind dropdown options.

Once the dropdown unexpand,I want div "abc" to come back to its original position.

解决方案

If you mean you don't want the elements hidden behind the dropdown then you have two ways to go..

1. Attach an onClick event to the dropdown to change the min-height css attribute of the box below (which contains the other elements) or the container of the select box from 'auto' to the needed amount of pixels.

2. Implement a dropdown in CSS with divs/ul showing and hiding the children elements. You can take the same approach as a website does dropdown menu in their headers. This will push all content down.

这篇关于展开下拉菜单时如何移动元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！