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

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>

时间： 2024-12-18 04:07:07

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

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

jQuery 二级菜单,一次显示一个小类鼠标点击显示小类本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="arrowlistmenu"> <h3 class="menuheader expandable">表单</h3> <ul class="categoryitems"> <li><a href="

jQuery 点击显示再次点击隐藏

<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> </head> <body> <div> <span class="color">深咖色</span> <div class="cc"></div

jquery点击显示隐藏的三种方法,从复杂到简单.使用jquery需要引用jquery库,如右所示<script src="jquery-1.11.3.min.js"type="text/javascript"></script>. 旁边按钮随着收缩展开发生状态变化,展开+变—,收缩—变+. 收缩效果: 展开效果: 一.HTML结构(盗用网上的) <body> <li class=&

jquery点击显示隐藏块

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击显示块</title> <script src="script/jquery-2.1.4.js"></script> //引入jquery模块 <style>

jquery Mobile点击显示加载等待效果

点击某个按钮或链接时,触发等待加载效果: Xml代码 <script> <!-- $(document).bind("mobileinit", function(){ }); $( function() { //默认设置,一个小圈圈在转 $('#default').live( 'tap', function() { $.mobile.loadingMessageTextVisible = false; $.mobile.showPageLoadingMsg();

jquery小例子，点击显示个数

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Insert title here</title> 6 <script type="text/javascript" src="../js/jquery-1.8.2.js"></script> 7 </hea

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

点击显示隐藏div 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text

jquery 点击显示更多

点击显示更多 html <div class="servicepicture banxin"> <div class="imgcontent"> <div class="img"> <img src="/uploads/image/20190411/d5ec13bdf0fcb9eaa8cf265d94fe6035.png" /> </div> <div clas

juqery 点击显示点击隐藏，slideDown slideUp slideToggle

<!doctype html> <html> <head> <meta charset="utf-8"> <title>webrx-title</title> <script src="js/jquery-1.11.2.min.js"></script> <style> #ad{ width:200px; height:300px; background-co

JQuery实现鼠标滑过显示导航下拉列表

我们往往是将同一级目录下的栏目先隐藏起来,当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表,下面为大家讲解下是如何实现的,当网站导航栏项目很多的时候,我们往往是将同一级目录下的栏目先隐藏起来.当用户的鼠标滑过时则显示出来.这就是用javascript实现的一个导航栏下拉列表.小编一步步给大家讲解.值得注意的是我们使用的是Javascript的一个框架Jquery来实现的.所以,你在使用的时候必须要下载Jquery. 先建立HTML代码 <html> <h