可以通过以下步骤实现:
-
给按钮添加一个点击事件的监听器。
-
在监听器的回调函数中,使用 jQuery 的
show()
和hide()
方法来显示或隐藏需要操作的代码。
代码示例:
HTML:
<button id="btn">显示/隐藏代码</button>
<div id="code" style="display:none;">
这是需要显示/隐藏的代码
</div>
JavaScript:
$(document).ready(function() {
$('#btn').click(function() {
$('#code').toggle();
});
});
解释:
首先,我们在 HTML 中添加了一个按钮和需要显示/隐藏的代码,代码的初始状态设置为 display:none;
,也就是不显示。
然后,在 JavaScript 中,我们使用 $()
函数选择按钮的 DOM 元素,并在其上添加了一个 click()
事件监听器。在监听器的回调函数中,我们使用 toggle()
方法来显示或隐藏代码。toggle()
方法会根据元素当前的状态,自动切换显示和隐藏状态。
注意:在 HTML 中,我们给代码元素添加了 id="code"
,在 JavaScript 中,我们使用 $()
函数选择这个元素,并对其执行 toggle()
方法。