JavaScript 最简单实现隐藏和显示元素

关注

原创最新推荐文章于 2026-07-14 14:22:21 发布 2.4k 阅读 AI 写同款· GEO 优化 ›

JQuery实现HTML元素隐藏和显示让我们来模仿一下淘宝网当你搜索某个商品的时候，的那种显示全部品牌和显示部分品牌的功能。首先我们来理清一下思路; 1：一开始需要先隐藏需要隐藏的元素 2：你需要通过jquery获取需要在开始显示的时候需要隐藏的元素对象 3：在页面写一个可以触发点击事件的按钮或者链接，使用jquery为这个按钮或者链接添加点击事件 4：当按钮被点击的时候，获取需要隐藏的对象当前是否隐藏值 5：如果是隐藏阅读详情

JavaScript 最简单实现隐藏和显示元素

通过按钮点击实现的隐藏与显示

新建HTML文件，复制如下代码即可

<!DOCTYPE html>
<html>
<head>
    <title>js 显示/隐藏 功能</title>
</head>
<body>
<p>点击按钮 显示/隐藏</p>
<button id="btn" onclick="fun()">button</button>
<div id="con" style="display: none">这是一个js 显示/隐藏 功能 demo</div>

<script type="text/javascript">
    var flag = false;
    var div = document.getElementById("con");

    function fun() {
        if (flag ^= true) {
            div.style.display = "block";    // 显示
        } else {
            div.style.display = "none";     // 隐藏
        }
    }
</script>
</body>
</html>