首先是body与样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div{ 200px; height: 200px; background-color : red; display:none; } .active { display:block; } </style> </head> <body> <input type="button" value="显示&隐藏"> <div></div> </body> </html>
在上面内容中，实现div部分的显示与隐藏
$(function(){ $("input").click( function(){ $('div').toggleClass( 'active' ); } ); });
toggleClass() 直接用来控制show（） hide（）简单粗暴。
$("input").click(function(){ if ( $('div').hasClass("active") ) { $("div").removeClass( 'active' ); }else { $("div").addClass( "active" ); } }); });
利用if条件来判断
$("input").click(function(){ if( $("div").css( 'display' ) == 'block' ) { $("div").css( "display", 'none' ); }else { $("div").css( "display", 'block' ); } }); });
.css()的几种写法
$("input").click(function(){ if( $("div").css( 'display' ) == 'block' ) { $("div").hide(); }else { $("div").show(); } }); });
将toggleClass拆分来分别完成