jQuery 實現顯示與隱藏效果

知否發表於2021-10-18
jQuery

本節我們來學習如何使用 jQuery 中的方法來實現元素的顯示與隱藏效。

hide()方法

hide() 方法用於隱藏指定的元素，與 CSS 中的 display:none 效果類似。

語法如下所示：

$(selector).hide(speed,easing,callback)
  • speed：可選，規定隱藏效果的速度。可選值為 slow、fast、毫秒。
  • easing：可選，規定在動畫的不同點上元素的速度，可選值為 swing、linear。
  • callback：可選，hide() 方法執行完之後，要執行的函式。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
     $("button").click(function(){
      $(".fruit").hide('slow','linear');
     });
  });
</script>
</head>
<body>
  <div>
    <button>隱藏下面內容</button>
    <div class="fruit"> 
      <p>我喜歡的水果：</p>
      <ul>
        <li>西瓜</li>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>桃子</li>
        <li>哈密瓜</li>
      </ul>
    </div>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

show()方法

show() 方法用於顯示隱藏的指定元素。與 CSS 中 display:none 的效果類似。

語法如下所示：

$(selector).show(speed,easing,callback)

show() 方法中的引數和 hide() 方法中引數類似。

示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
     $(".hide").click(function(){
      $(".fruit").hide('slow','linear');
     });
     $(".show").click(function(){
      $(".fruit").show('slow','linear');
     });
  });
</script>
</head>
<body>
  <div>
    <button class="hide">隱藏下面內容</button>
    <button class="show">顯示下面內容</button>
    <div class="fruit"> 
      <p>我喜歡的水果：</p>
      <ul>
        <li>西瓜</li>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>桃子</li>
        <li>哈密瓜</li>
      </ul>
    </div>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

toggle()方法

上面示例中我們在實現顯示和隱藏效果時，需要使用兩個按鈕分別控制。那麼有沒有辦法只通過一個按鈕就可以實現顯示和隱藏效果呢。這就需要用到 toggle() 方法了，toggle() 方法可以用於切換 hide() 和 show() 方法。

語法如下所示：

$(selector).toggle(speed,callback,switch)
  • speed：可選，規定元素從可見到隱藏的速度，可選值又slow、normal、fast、毫秒。
  • callback：可選，toggle 函式執行完之後，要執行的函式。
  • switch：可選，規定 toggle 是否隱藏或顯示所有被選元素。True 表示顯示所有元素，False 表示隱藏所有元素。如果設定此引數，則無法使用 speed 和 callback 引數。
示例：

例如實現上述示例效果，我們只需要像下面這樣寫即可，主要是修改 jQuery 程式碼部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_俠課島(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $(".toggle").click(function(){
      $(".fruit").toggle(1000);
    });
  });
</script>
</head>
<body>
  <div>
    <button class="toggle">切換顯示與隱藏</button>
    <div class="fruit"> 
      <p>我喜歡的水果：</p>
      <ul>
        <li>西瓜</li>
        <li>蘋果</li>
        <li>香蕉</li>
        <li>桃子</li>
        <li>哈密瓜</li>
      </ul>
    </div>
  </div>
</body>
</html>

在瀏覽器中的演示效果：

我們來看一下區別，使用 show() 和 hide() 方法需要的程式碼：

$(function(){
     $(".hide").click(function(){
      $(".fruit").hide('slow','linear');
     });
     $(".show").click(function(){
      $(".fruit").show('slow','linear');
     });
  });

使用 toggle() 方法需要的程式碼：

$(function(){
    $(".toggle").click(function(){
      $(".fruit").toggle(1000);
    });
});

所以很明顯，在需要實現隱藏和顯示兩種效果相互切換時，使用 toggle() 方法是很方便的。

連結：https://www.9xkd.com/

相關文章