jQuery设置下拉框显示和隐藏效果的方法分析

本文阐述了用jQuery设置下拉框显示和隐藏效果的方法。分享给大家参考，如下：

jQuery的hide()和show()方法分别用于隐藏和显示HTML元素，而toggle()方法可以切换hide()和show()方法，即显示隐藏元素和隐藏显示元素。

$(“选择”)。hide()；//隐藏下拉框$(“选择”)。show()；//显示下拉框$(“选择”)。toggle()；//如果显示下拉框，将其隐藏，反之亦然。示例代码如下

1.创建Html元素

div class=' box ' span单击按钮显示或隐藏下拉框：/span div class=' content ' select name=' test ' Option value=' 0 '请选择一个项目/选项选项值='1 '我不选择/Option option value='2 '只选择/option/select/div输入类型=' button' value=' display' /div2。设置css样式

div . box { width :300 px；padding:20pxmargin:20pxborder:4px虚线# ccc} div.box span { color: # 999font-style :斜体；} div . content { width :250 px；margin 3 336010 px 0；padding:20pxborder:2px实心# ff6666}选择{ width:150px高度：30 px；border:1px固体# 6699FF}输入[type=' button ']{ height :30 px；margin:10pxpadding:5px 10px}3.编写jquery代码

$(function(){ $('select '))。hide()；//隐藏下拉框$ (':按钮')。单击(function () {$ ('select ')。默认情况下切换()；//如果已经显示，则隐藏；如果它被隐藏，它将显示$(this)。val($(this)。val()==' display '？隐藏' : '显示')；})})4.观察效果

在初始状态下，默认情况下选择是隐藏的

点击显示按钮，选择将出现，按钮的标题将变为“隐藏”

点击“隐藏”，选择消失并返回初始状态

更多对jQuery感兴趣的读者，请查看本站话题：《jQuery常见事件用法与技巧总结》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》、0103010。

希望本文对大家的jQuery程序设计有所帮助。