jQuery的data-toggle功能是一個非常實用的工具，它可以讓網頁的交互更加靈活，更加方便用戶操作。通常來說，我們在網站中經常用到的功能就是顯示和隱藏某個元素。而data-toggle可以輕松實現這個功能，以下是代碼示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>data-toggle功能示例</title>
<!-- 引入jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>點擊按鈕顯示/隱藏內容</h1>
<p>這是一段需要隱藏和顯示的文字。</p>
<!-- 設置toggle屬性值為: click -->
<button class="btn btn-primary" data-toggle="click" data-target="#hide-text">顯示/隱藏文字</button>
<!-- 隱藏的文字 -->
<p id="hide-text" style="display:none;">這是需要隱藏的文字。</p>
<!-- 實現顯示和隱藏 -->
<script>
$(document).ready(function(){
$('[data-toggle="click"]').click(function(){
$( $('#' + $(this).data('target') ) ).toggle();
});
});
</script>
</body>
</html>在這個示例代碼中，我們創建了一個按鈕，并設置了data-toggle屬性和data-target屬性。當用戶點擊這個按鈕時，頁面上ID為“hide-text”的元素就會顯示或隱藏。
在jQuery的腳本代碼中，我們使用$函數來選取頁面中的data-toggle屬性值為“click”的元素。當用戶點擊選中的元素時，我們使用toggle()函數來實現對目標元素的隱藏和顯示。
使用data-toggle功能可以大大簡化網頁交互的代碼實現過程，提升用戶體驗和編碼效率。