jquery实现元素显示和隐藏

jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。那么如何使用jQuery实现显示和隐藏呢？请看下面的代码教程。

使用方法

首先在HTML中引入jQuery的库

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

HTML结构

<div>
    <p class="flip show-p">点击这里，显示面板</p>
    <p class="flip hide-p">点击这里，隐藏面板</p>
    <p class="flip toggle">点击这里，隐藏/显示面板</p>
    <div class="panel" style="display: none;">
        <p>jquery显示和隐藏效果。</p>
        <p>在这里可以搜索到你想要的web知识。</p>
    </div>
</div>

CSS样式

div.panel, p.flip {
            width: 400px;
            margin: 0;
            padding: 5px;
            text-align: center;
            background: #e5eecc;
            border: solid 1px #c3c3c3;
        }

JS代码

$(document).ready(function(){
        $(".show-p").click(function(){
            $(".panel").show();
        });
        $(".hide-p").click(function(){
            $(".panel").hide();
        });
        $(".toggle").click(function(){
            $(".panel").toggle();
        });
    });

语法

// 隐藏
$(selector).hide(speed,callback);
// 显示
$(selector).show(speed,callback);
// 显示被隐藏的元素，并隐藏已显示的元素
$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。