Question

我正在尝试创建一个与GMail中显示的相同的下拉效果。当您单击标签时，应打开一个下拉菜单，用户应该能够选择值。

我认为可以通过在选择上对齐标签/ div来实现，只有选择的允许是可见的，当用户点击标签或箭头时，下拉应该打开。此外，标签值也不应在下拉列表中显示。

通过css或JavaScript获得任何帮助吗？

Answer 1

上面指定的技术看起来非常棘手，并且在旧版本的IE中无法使用。较旧版本的IE显示选择框高于其他所有内容，并且是一个很难解决的问题。

你最好使用自定义下拉列表，其中有很多用jQuery编写的。

或者你真正需要复制gMail功能的是几行javascript来隐藏和显示div。

Answer 2

我认为jquery .click（）处理程序可以提供帮助，但不是！：（（（

所以我找到了唯一的方法：

<style>
  div {display:inline-block; position:relative;}
  div select {position: absolute; left:0px; top:0px; width:100%; height:100%; opacity:0; cursor:pointer;}
</style>
<div>
  label text here
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </select>
</div>

结果 - 您单击某个标签并打开标准选择框。根本没有JS;）

Answer 3

点击你想要显示选择框。

请参阅此Jquery示例。

http://api.jquery.com/show/

简单。那里有.show（）和.hide（）函数。

如果你想使用css

使用.add（）css或addClass和removeClass。

参考上面的链接。

Answer 4

你只需要显示和隐藏div，看看这个

http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

将标签置于选择位置并打开选择单击

4 个答案: