html代码:

<button>点击</button>

<div class="div"></div>

css代码:

<style>

.div{

background-color:black;

border: 1px solid red;

width:100px;

height:100px;

display:none

}

</style>

jq代码:

<script>

$("button").click(function(){

if($(".div").css("display")=="none"){

$(".div").show();

}else{

$(".div").hide();

}

});

</script>

用jquery怎么实现点击显示,再一次点击隐藏的更多相关文章

  1. jQuery 点击显示再次点击隐藏

    <html> <head> <script type="text/javascript" src="/jquery/jquery.js&qu ...

  2. 基于Jquery UI的autocompelet改写,自动补全控件,增加下拉选项,动态设置样式,点击显示所有选项,并兼容ie6+

    Jquery UI的autocompelete改写 注意:实现功能,除了原版的自动补全内容外,增加一个点击显示所有选项,样式能动态设置. 加载数据的来源为后台数据库读取. 具体代码如下: 引用 从官方 ...

  3. jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类

    jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...

  4. 原生JS实现点击一个按钮显示一个div,再点击按钮div隐藏,或点击除div外其它空白处div隐藏

    <!DOCTYPE html> <html style="font-size: 24px"> <head> <title>js点击按 ...

  5. jquery对类的操作,添加,删除,点击添加,再点击删除

    jquery对类的操作,添加(addClass),删除l类(remoceClass),点击添加,再点击删除(toggleClass)

  6. 锋利的Jquery(点击显示隐藏div)

    点击显示隐藏div <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  7. jquery 点击显示更多

    点击显示更多 html <div class="servicepicture banxin"> <div class="imgcontent" ...

  8. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  9. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片(仿相册插件)

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  10. Jquery控制点击时一、二级菜单自由隐藏与出现

    一.基本HTML和CSS HTML中产生一.二级导航的代码: {loop $nav $key $value} <div class=”u_con”> <span class=” xg ...

随机推荐

  1. java 练手 谁是最好的Coder

    Problem A 谁是最好的Coder 时间限制:1000 ms  |  内存限制:65535 KB   描述 计科班有很多Coder,帅帅想知道自己是不是综合实力最强的coder. 帅帅喜欢帅,所 ...

  2. protect和private 的区别

    protect和private 的区别 public 表示全局,类内部外部子类都可以访问: private表示私有的,只有本类内部可以使用: protected表示受保护的,只有本类或子类或父类中可以 ...

  3. 关于css3的动画总结

    旋转:transform:rotate(xxdeg)扭曲:transform:skey(x,y)缩放:transform:scale(x,y)变形位移:transform:translate(x,y) ...

  4. IDEA之web项目(maven项目)创建

    1.下载IDEA付费版,有30天的试用期,免费版创建不了web项目(导入不了tomcat). 网址:IntelliJ IDEA :: Download Latest Version of Intell ...

  5. Lvs原理及部署之ARP协议

    1.什么使ARP协议 ARP协议,全称"Address Resolution Protocol" ,中文名是地址解析协议,使用ARP协议可实现通过IP地址获得对应的物理地址(MAC ...

  6. CSS3圆角边框的使用-遁地龙卷风

    0.快速入门 border-radius:50px; 1.border-radius详解 border-radius:50px; 上右下左,水平和垂直距离都是50px border-radius:50 ...

  7. Android 网络请求框架android-async-http问题

    今天通过接口请求服务器的一些app数据,发现一个很奇怪的问题,请求一个链接的时候,通常在第一次请求发起的时候没有什么问题,能很快的拿到数据,但是 往后再去请求的时候就会等待很久,而且最后会请求失败,一 ...

  8. Java Io 流(输入输出流)

    IO流,也就是输入和输出流,可分为字节流和字符流. 1. 字节流 (1). InputStream 输入流,用于读取文件 输入流常用API: inputStream.read()  读取一个字节 in ...

  9. windows7 + cocos2d-x 3.2 +vs2012 速度真的很慢

    每次编译要大半天,简直伤不起,这样效率如何上的去???有谁有办法?

  10. BZOJ 3364: [Usaco2004 Feb]Distance Queries 距离咨询

    Description 一棵树,询问两点间距离. Sol 倍增. 方向没用. 没有然后了. Code /************************************************ ...