JQ控制DIV显示和隐藏效果，添加固定密码才可显示

最新推荐文章于 2026-06-17 12:07:58 发布

原创最新推荐文章于 2026-06-17 12:07:58 发布 · 396 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript

收录于

开发板推荐：天空星STM32F407VET6开发板

超高性价比 STM32主控 | 超高主频 | 一板兼容百芯 | 比赛神器 | 沉金彩色丝印

点击查看

.content{display: none;}
<div class="content">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function () {
// 预设密码
const correctPassword = "123456";
// 绑定按钮的点击事件
$('#toggleDivs').click(function () {
if ($('.content:first').is(':visible')) {
// 如果 div 是显示状态，直接隐藏并更新按钮文本
$('.content').hide();
$(this).text('显示');
} else {
// 如果 div 是隐藏状态，提示输入密码
const inputPassword = prompt('请输入密码：');
if (inputPassword === correctPassword) {
// 密码正确，显示 div 并更新按钮文本
$('.content').show();
$(this).text('隐藏');
} else {
// 密码错误，给出提示
alert('密码错误，请重试。');
}
}
});
});
</script>