jQuery怎么設置下拉框顯示與隱藏效果

這篇文章主要介紹jQuery怎么設置下拉框顯示與隱藏效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

具體如下：

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. 設置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怎么設置下拉框顯示與隱藏效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關知識，歡迎關注億速云行業(yè)資訊頻道！