jquery实现点击控制div的显示和隐藏

2024-02-11 19:21| 来源: 网络整理| 查看: 265

我们使用点击显示、点击隐藏的时候，一般有两种可选方案

.示例 html

首页点击

最简单的方法：toggle() 点击显示 h1 和点击隐藏 h1

$(function () { $("#btn").click(function () { $("h1").toggle(); }) })

toggle() 的作用就是当对象是显示的就隐藏，当是隐藏的则显示。

果你除了显示和隐藏之外还需要同时实现其他功能的话，可以这样：

$(function () { $("#btn").click(function(){ // 如果h1是显示的 if($("h1").hasClass("show")){ // 执行隐藏 $("h1").hide().removeClass("show"); // 其他 }else{ // 显示 $("h1").show().addClass("show"); } }) })

这里通过自定义一个 class : show 来判断 div 是显示或隐藏

hasClass() 是否存在某个class

hide() 隐藏对象

show() 显示对象

removeClass() 移除一个class

addClass() 添加一个class

除此，还可以通过jquery设置这个 div 的 css : display:none/block 来实现隐藏/显示

【本文地址】

公司简介

联系我们