jQuery结合CSS制作一个漂亮的下拉菜单
当我们进行表单设计时，我们可能需要使用选择下拉选项控件。不幸的是，IE浏览器的默认选择控件是丑陋的，不能被样式控制，所以我们不能在选项中添加图片信息。今天我将解释如何使用CSS和jQuery制作一个漂亮的下拉菜单。XHTML
请选择城市
长沙
北京
南京
堪培拉
多伦多
如您所见，我们使用div来替换下拉选项控件的本机选择标记。
CSS
#下拉{宽度：186px；保证金：80px汽车；位置：相对}
#下拉p {宽度：150px；身高：24px；线高度：24px；填充左：右：30px 4px；填充；
边境：1px solid # a9c9e2；背景：# e8f5fe URL（箭头.gif）没有重复正确的4px；
颜色：# 807a62；鼠标指针}
#下拉UL {宽度：184px；背景：# e8f5fe；边距：2px；边框1px solid # a9c9e2；
位置：绝对值；显示：无}
#下拉ul {身高：24px；线高度：24px；文本缩进：10px }
#下拉UL Li {显示：块；高度：24px；颜色：# 807a62；文字装饰：无}
UL Li：#下拉悬停{背景：# c6dbfc；颜色：# 369 }
不要谈论更多的样式，你可以在CSS中修改背景颜色和字体颜色，甚至任何其他定义的样式。
jQuery
首先，当选择城市点击时，确定下一级UL是否处于显示状态，如果是的话，隐藏下拉选项，否则打开（下拉）下拉选项。
$（#下拉p）。Click（function（）{）
UL = $（var#下拉UL ）；
如果（ul.css（显示）= =无）{
ul.slidedown（快速）；
其他{ }
Ul.slideUp（快速）；
}
}）；
然后，当单击下拉选项时，获取选项内容，将选项内容写入标签，并隐藏下拉选项。
$（#下拉UL Li）。Click（函数（）{（）
var（$）；
$（#下拉p）。Html（TXT）；
$（#下拉UL）藏（）；
}）；
所以很容易做一个简单的下拉选项。
当然，如果您与背景交互，您需要获得该选项的值，那么您需要首先定义XHTML。
请选择城市
长沙
北京
南京
堪培拉
多伦多
从代码中可以看到，向标签中添加一个相关属性，并将其赋给select选项标记的值：
$（#下拉UL Li）。Click（函数（）{（）
var（$）；
$（#下拉p）。Html（TXT）；
VaR值= $（this）。Attr（关系）；
$（#下拉UL）藏（）；
$（#结果），Html（你选择+文本+
}）；
这就完成了一个完整下拉选项的操作。
以上是本文的全部内容，希望大家能喜欢。