当前位置：首页 > jquery

jquery显示隐藏div

2026-03-16 10:47:27jquery

jQuery显示隐藏div的方法

使用jQuery可以轻松实现div元素的显示和隐藏。以下是几种常见的方法：

toggle()方法

toggle()方法可以在显示和隐藏之间切换div的状态。如果div当前是显示的，调用toggle()会隐藏它；反之则会显示它。

$("#divId").toggle();

show()和hide()方法

show()方法用于显示div，hide()方法用于隐藏div。

// 显示div
$("#divId").show();

// 隐藏div
$("#divId").hide();

fadeIn()和fadeOut()方法

fadeIn()和fadeOut()方法可以实现淡入淡出的效果，让显示和隐藏更加平滑。

// 淡入显示div
$("#divId").fadeIn();

// 淡出隐藏div
$("#divId").fadeOut();

slideDown()和slideUp()方法

slideDown()和slideUp()方法可以实现滑动效果，让div像窗帘一样上下滑动显示或隐藏。

// 滑动显示div
$("#divId").slideDown();

// 滑动隐藏div
$("#divId").slideUp();

使用动画效果

可以通过设置动画时间和回调函数来增强显示和隐藏的效果。

// 显示div，持续500毫秒，完成后执行回调函数
$("#divId").show(500, function() {
    console.log("显示完成");
});

// 隐藏div，持续500毫秒，完成后执行回调函数
$("#divId").hide(500, function() {
    console.log("隐藏完成");
});

示例代码

以下是一个完整的示例，展示如何通过按钮控制div的显示和隐藏：

jquery显示隐藏div

<!DOCTYPE html>
<html>
<head>
    <title>jQuery显示隐藏div</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #demoDiv {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 20px;
        }
    </style>
</head>
<body>
    <button id="toggleBtn">切换显示/隐藏</button>
    <button id="showBtn">显示</button>
    <button id="hideBtn">隐藏</button>
    <div id="demoDiv"></div>

    <script>
        $(document).ready(function() {
            $("#toggleBtn").click(function() {
                $("#demoDiv").toggle();
            });

            $("#showBtn").click(function() {
                $("#demoDiv").show();
            });

            $("#hideBtn").click(function() {
                $("#demoDiv").hide();
            });
        });
    </script>
</body>
</html>