jQuery中toggleClass()与toggle()

一时失言乱红尘 2022-07-12 11:44 118阅读 0赞

#  #

# 1.toggleClass() #

如果我们在CSS类的应用与不应用之间进行切换，我们可以使用toggleClass()来实现。  
<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
  $("p").toggleClass('hover');  
  \});  
\});  
</script>  
<style>  
.hover\{  
background-color:yellow;  
\}  
</style>  
</head>  
<body>  
<p>This is a paragraph.</p>  
<button class="btn1">Toggle</button>  
</body>  
</html>  
运行的效果是如果我们点击按钮的话，p元素的背景会出现黄色，如果我们再次点击按钮的话，p元素的背景就会恢复为原来的颜色。如果我们这个时候再去点击按钮的话，背景元素还是会变为黄色的。这就是切换应用一个CSS类。实际上就是如果CSS类已经应用到指定元素，则此方法删除CSS类；如果尚未应用，则为制定元素应用CSS类。

# 2.toggle() #

此方法是为指定的元素附加两个事件处理函数。第一个事件处理函数在事件偶数次发生时被执行，而第二个事件处理函数在事件奇数次发生时被执行，从0开始计数。就是如果我们使用toggle()方法，两件事件处理函数将被轮流执行。  
$(document).ready(function()\{  
$('.buttons').toggle(function()\{  
$(this).addClass('hover');\},  
function()\{  
$(this).removeClass('hover');  
\}  
\});  
\});

还可以这样子使用

<html>  
<head>  
<script type="text/javascript" src="/jquery/jquery.js"></script>  
<script type="text/javascript">  
$(document).ready(function()\{  
  $(".btn1").click(function()\{  
  $("p").toggle();  
  \});  
\});  
</script>  
</head>  
<body>  
<p>This is a paragraph.</p>  
<button class="btn1">Toggle</button>  
</body>  
</html>  
这样子的话，点击按钮后p元素就会不见了，但是如果我们又点击按钮p元素就会重新出现.