jQuery toggle()设置CSS样式

jQuery的toggle()方法可以用于切换样式、元素的显示与隐藏等操作。下面将详细讲解如何利用toggle()方法设置CSS样式。

toggle()方法基础使用

toggle()方法用于切换元素的可见性，被选元素隐藏就显示，被选元素显示就隐藏。

$("button").click(function(){
  $("p").toggle();
});

上述代码中，点击button元素时，p元素将被隐藏或显示。可以简单理解为该方法会自动判断元素当前是否可见，然后执行相应的操作。

toggle()方法结合CSS设置

除了默认的切换元素可见性，toggle()方法还可以结合CSS样式进行设置。

例如，初始情况下，一个div元素的宽度为200px，当点击按钮时，宽度都将逐渐变为0或200。可以使用如下代码：

$("button").click(function(){
  $("div").toggle(function(){
    $(this).css("width","0");
  },function(){
    $(this).css("width","200px");
  });
});

上述代码中，首先获取名为button的元素，当该元素被点击时，切换名为div的元素的可见性，并且当每次点击后，通过回调函数分别设置宽度，即从200px变为0，或从0变为200px。

另外，还可以使用toggleClass()方法实现CSS样式的切换，实现方式如下：

$("button").click(function(){
  $("div").toggleClass("wide");
});

在CSS中，定义class名为wide，为元素设置宽度：

.wide {
  width: 200px;
}

在点击按钮后，div元素将会切换类名，宽度切换为200px或自适应。

以上就是利用jQuery toggle()方法设置CSS样式的完整攻略。