用jquery怎么实现点击显示,再一次点击隐藏

author author     2023-04-06     601

关键词:

1、Jquery使用内置的show和hide方法就可以实现,具体的操作步骤首先需要打开hbuilder编辑器,新建一个a标签和一段隐藏的div,设置好它们的id属性,并设置一些简单的样式:

2、然后引入Jquery的库文件,编写代码。首先获取a标签的dom并给它加一个click事件,在click的回调中判断div是否为隐藏状态,是的话就隐藏div否则就显示div:

3、最后来到编辑器右侧的浏览器,可以看到此时div是显示的:

4、点击一下,div就会隐藏了,可以来回点击切换显示和隐藏:

参考技术A

    你要点击的按钮是 $( '#button' )

    你要显示/隐藏的节点是 $( '#information' )

$( '#button' ).on( 'click', function( e ) 
    $( '#information' ).toggle();
 );

 不可以像某个答案那样,用 .css( 'display' ) == 'block' 判断 dom 的隐藏状态。这样写充满了 bug。

如果非要判断的化,用这个:

$(element).is(":visible");

本回答被提问者采纳
参考技术B

这样的问题以前曾遇到过,用于后台点击显示,可以修改,再次点击关闭并保存,实现方法如下:

1、引用jquery-1.8.3.min.js

2、html内容

<div class="content">
一张网页,要经历怎样的过程,才能抵达用户面前?<br/>
一位新人,要经历怎样的成长,才能站在技术之巅?<br/>
探寻福利吧(fulibae.com)的秘密;<br/>
体验这里的挑战;<br/>
成为这里的主人;<br/>
加入百度,加入网页搜索,你,可以影响世界。
</div>
<input type="button" id="btn" value="隐藏内容" />

3、js代码

$("#btn").click(function()
    if ($(".content").css("display")=='block')
        $(".content").hide();
        $(this).val("显示内容");
    else
        $(".content").show();
        $(this).val("隐藏内容");
    
);

希望这个回答对你有帮助,祝你早日解决问题。

参考技术C <script type="text/javascript">
$(function()
$("#but1").click(function()
$("#div1").toggle();
);

);
</script>

<body>
<input type="button" value="点击" onclick="" id="but1">
<div id="div1" class="" style="width:300px;height:300px;border:1px solid red"></div>
</body>

toggle()用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

怎么用js显示隐藏div

参考技术A怎么用js来显示或隐藏一个div?很简单,下面一起来看一下。01首先我们创建一个div,和一个按钮。用按钮的点击来控制div的显示或隐藏。02添加一个样式名叫hide的样式,主要是设置display=none,即隐藏。03接着用js来实现... 查看详情

mfc如何点击按钮出现一张图片,再一次点击就会消失……

...IDE);bShow=!bShow;追问这部分代码我看懂了,运行也没错,但怎么不显示?追答是不是第一步做的不对?你先去掉图片的隐藏属性,运行程序能显示图片么?如果可以的话应该就没有问题,否则检查下吧。然后还有一点要注意,位图... 查看详情

如何用js实现点击图标自动隐藏和显示窗口

点击这个图标会显示,再点击会隐藏,并且图标发生变化,如何实现?????????控制一下这个div块的display属性,如果显示就是block反之就是none,也可以用jquery的写法,hide()和show();$("#id").show();或者是$("#id").hide();追问我... 查看详情

用js实现点击按钮显示div然后两秒后消失但是只能执行一次怎么才能做到可以重复调用求助

用js实现点击按钮显示div然后两秒后消失但是只能执行一次怎么才能做到可以重复调用求助设置settimeout让他消失但是只能用一次<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <s... 查看详情

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

html代码画个div和button<div class="abc" style="display:none"></div><input type="button" class="but" />js代码<script>$(document).ready(function(e) //DOM加载完成后执行方法    $(".but").click(function(e) //点击事件        $(".abc").toggle()... 查看详情

用html和css实现点击内容显示再点击隐藏

...度为0,overflow:hidden;点击时overflow:visible;由于第一条只能实现点击时显示,不能实现继续隐藏;排除方法1。考虑复选框特性,点击时样式框内有小勾,再点击时小勾消失。 HTML实现代码:<div><inputtype="checkbox"id="di 查看详情

js怎么实现点击div区域外任意位置,使这个div隐藏?

用的jquery,本身这个div是点击另一个按钮用的toggle(),来显示和隐藏的,现在我想让鼠标点击div区域外任意地方都把这个div隐藏,请问怎么实现好呢?谢啦参考技术A我觉得可以给表单加上事件,但是这样会不会点击这个div时也会隐... 查看详情

怎么用js实现,点击“继续”,隐藏当前div,显示下一个div,点击“返回”隐藏当前div,显示上一个div

document.getElementByID('continue').onclick = function() //找到所有的div var div = document.getElementByTagName('div'); //循环div,找到处于显示状态的div将其隐藏,并将其下一个div显示 for(var i=0,len = div.length;i&l... 查看详情

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

示例html<div class="abc" style="display:none"></div><input type="button" class="but" />最简单的方法:<script>$(document).ready(function(e) $(".but").click(function(e) $(".abc&qu... 查看详情

jquery实现点击控制div的显示和隐藏(代码片段)

我们使用点击显示、点击隐藏的时候,一般有两种可选方案.示例html<divclass="index"><h1>首页</h1><buttonid="btn">点击</button></div>最简单的方法:toggle()  点击显示h1和点击隐藏h1$(function()$("#btn").click(funct... 查看详情

jquery怎么实现展开和收起按钮之间的切换

就类似有我们的百度在回答问题或者提问问题的时候要点击一个按钮,输入就弹出来,按钮也随之改变,再点击就收起输入框,按钮就变回之前那个需要准备的材料分别有:电脑、html编辑器、浏览器。1、首先,打开html编辑器,... 查看详情

jquery点击一次加载几张图片,再点击再加载几张图片,一直到所有图片都显示,怎么实现

jquery点击一次加载几张图片,再点击再加载几张图片,一直到所有图片都显示,怎么实现var imgMana = function ()     //内部指针索引    this.idx = 0;    //需要加载的... 查看详情

jquery如何实现点击查看更多,显示更多内容

1、新建一个html文件,命名为test.html。2、在test.html文件内,引入jquery.min.js库文件,成功加载该文件,才能使用jquery中的方法。3、在test.html文件内,在p标签内,使用button标签创建一个按钮,按钮名称为“按钮”。4、在test.html文... 查看详情

用点击显示/隐藏 UIToolbar

...,让用户可以选择返回主视图。我通过UITapGestureRecognizer实现了这一点。但是,使用当前代码,当我转到视图时,我的工具栏不会隐藏。当我点击它时,它会像我 查看详情

用jquery,实现让快速双击只调用一次对象的click事件。

我将一个函数绑定在a的click事件上,当点击一下A标签后,我会将A隐藏起来,同时会新建一个结点插入到文档,但是当我双击的时候会调用两次click事件,这样就插入了两个新结点。有什么办法能让双击也只调用一次click事件,让... 查看详情

jquery实现多个li点击切换和显示隐藏

我写了一段代码能实现切换,但是点击时不能显示隐藏$(function() $("#topnavli").each( $("#topnavli").bind("click",function() $(this).siblings().removeClass("click").children("span").css("display",&quo... 查看详情

jquery怎么实现点击一个按钮控制一个div的显示和隐藏

试试 jquery的 toggle方法 或许对你有用再附上例子吧,例子中的jQuery库你下载一下引入文件就能看到效果:<html><head><script type="text/javascript" src="/jquery/jquery.js"></script><script t... 查看详情

jquery点击当前元素显示其他元素隐藏

参考技术A给你举个例子吧<a>点击</a><span>隐藏的内容</span><span>隐藏的内容</span><span>隐藏的内容</span><span>隐藏的内容</span>$(function()$("a").click(function()$("span").hide();))追问... 查看详情