快捷導(dǎo)航

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

更新時間：2019年09月15日 11:57:21 作者：寫給初學(xué)者的幾封信

這篇文章主要介紹了jQuery設(shè)置下拉框顯示與隱藏效果的方法,結(jié)合實例形式分析了jQuery針對頁面元素的事件響應(yīng)與屬性動態(tài)操作相關(guān)使用技巧,需要的朋友可以參考下

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

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

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

示例代碼如下

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

<div class="box">
  <span>點擊按鈕可以顯示或隱藏下拉框：</span>
  <div class="content">
    <select name="test">
      <option value="0">請選擇一個項目</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. 編寫jquery代碼

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

4. 觀察效果

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