.toggle() 第一讲·简单介绍

最新推荐文章于 2023-11-14 17:23:02 发布

ggg.ggg

最新推荐文章于 2023-11-14 17:23:02 发布

阅读量451

点赞数 1

分类专栏： jQuery函数文章标签： HTML+jQuer

本文链接：https://blog.csdn.net/QQ1904069052/article/details/51525053

版权

jQuery函数专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>.toggle() 第一讲·简单介绍</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button>点我</button>
<p>你好</p>
<p style="display: none">hello word！</p>
<script>
$( "button" ).click(function() {
  $( "p" ).toggle();
});
</script>
</body>
</html>

通过Chrome审查元素可以发现， .toggle()函数实质上改变的是相应元素的层叠样式属性值， .toggle()函数会改变它所有能选择到的元素的属性，将其层叠样式属性display的值从默认值（或者我们设置的值）改变为none，将其层叠样式属性display的值从none改变为默认值（或者我们设置的值）。每执行一次，就会做这两个动作，起到了一个开关的效果。
（欢迎各位高手指正不足之处）