JQ实现效果：点击（or鼠标滑过）连接时显示内容，再点击（鼠标滑出）连接时隐藏内容

最新推荐文章于 2020-03-17 23:00:35 发布

鱼儿跳

最新推荐文章于 2020-03-17 23:00:35 发布

阅读量991

点赞数

分类专栏： JQ 文章标签： jquery javascript 事件绑定隐藏和显示

本文链接：https://blog.csdn.net/xin9910/article/details/75046096

版权

JQ 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、采用事件绑定bind()

<!DOCTYPE html>
<html>
<head>
	<title>Char 4.1.2</title>
	<meta charset="utf-8"/>
	<script type="text/javascript" src="jquery.js"></script>
	<style type="text/css">
		.content{
			display: none;//给元素一开始设置为隐藏
		}
	</style>
	<script type="text/javascript">
		$(function(){
			//1、找到标题所在的元素，绑定bind
			$("#titles h2.head1").bind("click",function() {
				//2.找到内容所在元素，设置为contents
				var $contents=$(this).next();
				//3.判断是否是隐藏的
				if($contents.is(":visible")){
					$contents.hide();
				}else{
					$contents.show();
				}
		})
		})
	</script>
</head>
<body>
	<div id="titles">
		<h2 class="head1">what is jquery?</h2>
		<div class="content">
			jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
		</div>
	</div>

</body>
</html>

2、鼠标滑过操作mouseover()&&mouseout()

<!DOCTYPE html>
<html>

<head>
    <title>CHar 4.1.3</title>
    <meta charset="utf-8" />
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-size: 13px;
        line-height: 130%;
        padding: 60px
    }
    
    #div1 {
        width: 300px;
        border: 1px solid #0050D0
    }
    
    .head1 {
        height: 24px;
        line-height: 24px;
        text-indent: 10px;
        background: #96E555;
        cursor: pointer;
        width: 100%;
    }
    
    .content {
        padding: 10px;
        text-indent: 24px;
        border-top: 1px solid #0050D0;
        display: none;
    }
    
    .highlight {
        background-color: #ff3300;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript">
    $(function() {
        $("#div1 h3.head1").mouseover(function() {
            $(this).addClass('highlight');
            $(this).next().show();
        }).mouseout(function() {
            $(this).removeClass('highlight');
            $(this).next().hide();
        })
    })
  
    </script>
</head>

<body>
    <div id="div1">
        <h3 class="head1">jquery</h3>
        <div class="content">this is the jquery.the best!!</div>
    </div>
</body>

</html>

3、利用合成事件hover()或者toggle()方法

<!DOCTYPE html>
<html>

<head>
    <title>CHar 4.1.3</title>
    <meta charset="utf-8" />
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }
    
    body {
        font-size: 13px;
        line-height: 130%;
        padding: 60px
    }
    
    #div1 {
        width: 300px;
        border: 1px solid #0050D0
    }
    
    .head1 {
        height: 24px;
        line-height: 24px;
        text-indent: 10px;
        background: #96E555;
        cursor: pointer;
        width: 100%;
    }
    
    .content {
        padding: 10px;
        text-indent: 24px;
        border-top: 1px solid #0050D0;
        display: none;
    }
    
    .highlight {
        background-color: #ff3300;
    }
    </style>
    <script type="text/javascript" src="jquery.js"></script>
 
    <!-- hover -->
   <!--  <script type="text/javascript">
		$(function(){
			$("#div1 h3.head1").hover(function() {
				$(this).next().show();
			}, function() {
				$(this).next().hide();
			});
		})
	</script> -->
    <!-- toggle!!!!!!! -->
      <script type="text/javascript">
    $(function() {
        $("#div1 h3.head1").toggle(function() {
            $(this).next().show();
        }, function() {
            $(this).next().hide();
        })
    })
    </script>

</head>

<body>
    <div id="div1">
        <h3 class="head1">jquery</h3>
        <div class="content">this is the jquery.the best!!</div>
    </div>
</body>

</html>

鱼儿跳

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQ实现效果：点击（or鼠标滑过）连接时显示内容，再点击（鼠标滑出）连接时隐藏内容

1、采用事件绑定bind() Char 4.1.2 .content{ display: none;//给元素一开始设置为隐藏 } $(function(){ //1、找到标题所在的元素，绑定bind $("#titles h2.head1").bind("click",function() { //2.找到内容所在元素，设置为c
复制链接

扫一扫