jQuery怎么設(shè)置下拉框顯示與隱藏效果
這篇文章主要介紹jQuery怎么設(shè)置下拉框顯示與隱藏效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
創(chuàng)新互聯(lián)公司專注于開化企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),成都做商城網(wǎng)站。開化網(wǎng)站建設(shè)公司,為開化等地區(qū)提供建站服務(wù)。全流程定制制作，專業(yè)設(shè)計，全程項目跟蹤，創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)
具體如下：
jQuery的 hide() 和 show() 方法分別用來隱藏和顯示 HTML 元素，而 toggle() 方法則可以切換 hide() 和 show() 方法，也就是顯示被隱藏的元素，并隱藏已顯示的元素。
$("select").hide(); // 隱藏下拉框
$("select").show(); // 顯示下拉框
$("select").toggle(); // 如果下拉框是顯示的則隱藏之，反之亦然示例代碼如下
1. 創(chuàng)建Html元素
點擊按鈕可以顯示或隱藏下拉框：
請選擇一個項目
我不選
選就選吧
2. 設(shè)置css樣式
div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}
div.box span{color:#999;font-style:italic;}
div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}
select{width:150px;height:30px;border:1px solid #6699FF;}
input[type='button']{height:30px;margin:10px;padding:5px 10px;}3. 編寫jquery代碼
$(function(){
$("select").hide(); // 默認隱藏下拉框
$(":button").click(function() {
$("select").toggle(); // 已經(jīng)顯示則隱藏，隱藏了則顯示
$(this).val($(this).val()=="顯示"?"隱藏":"顯示");
})
})4. 觀察效果
初始狀態(tài)，select默認是被隱藏的
點擊顯示按鈕則出現(xiàn)select，同時按鈕的說明文字變?yōu)椤半[藏”
點擊“隱藏”，select消失，回到初始狀態(tài)
以上是“jQuery怎么設(shè)置下拉框顯示與隱藏效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！
網(wǎng)站題目：jQuery怎么設(shè)置下拉框顯示與隱藏效果
標題鏈接：
http://weahome.cn/article/iecdgs.html
重慶分公司
重慶分公司
