亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery設(shè)置下拉框顯示與隱藏效果的方法分析

 更新時(shí)間：2019年09月15日 11:57:21   作者：寫(xiě)給初學(xué)者的幾封信  
這篇文章主要介紹了jQuery設(shè)置下拉框顯示與隱藏效果的方法,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素的事件響應(yīng)與屬性動(dòng)態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下

本文實(shí)例講述了jQuery設(shè)置下拉框顯示與隱藏效果的方法。分享給大家供大家參考，具體如下：

jQuery的 hide() 和 show() 方法分別用來(lái)隱藏和顯示 HTML 元素，而 toggle() 方法則可以切換 hide() 和 show() 方法，也就是顯示被隱藏的元素，并隱藏已顯示的元素。

$("select").hide();   // 隱藏下拉框
$("select").show();   // 顯示下拉框
$("select").toggle();  // 如果下拉框是顯示的則隱藏之，反之亦然

示例代碼如下

1. 創(chuàng)建Html元素

<div class="box">
  <span>點(diǎn)擊按鈕可以顯示或隱藏下拉框：</span>
  <div class="content">
    <select name="test">
      <option value="0">請(qǐng)選擇一個(gè)項(xiàng)目</option>
      <option value="1">我不選</option>
      <option value="2">選就選吧</option>
    </select>
  </div>
  <input type="button" value="顯示">
</div>

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. 編寫(xiě)jquery代碼

$(function(){
  $("select").hide(); // 默認(rèn)隱藏下拉框
  $(":button").click(function() {
    $("select").toggle(); // 已經(jīng)顯示則隱藏，隱藏了則顯示
    $(this).val($(this).val()=="顯示"?"隱藏":"顯示");
  })
})

4. 觀察效果

初始狀態(tài)，select默認(rèn)是被隱藏的

點(diǎn)擊顯示按鈕則出現(xiàn)select，同時(shí)按鈕的說(shuō)明文字變?yōu)椤半[藏”

點(diǎn)擊“隱藏”，select消失，回到初始狀態(tài)

更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery常見(jiàn)事件用法與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery操作json數(shù)據(jù)技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》及《jquery選擇器用法總結(jié)》

希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。

相關(guān)文章

最新評(píng)論