4 simple ways to show and hide with Jquery_jquery

Html code:

Copy code The code is as follows:

Study World

• 1111111111
2222222222

• 333333333


• 4444444444
>
• 6666666666
  

Jquery code:

First implementation method:

Copy code The code is as follows: 1.

$(function(){

$(".topicList h3").click(function(){
var UL = $(this).next("ul");
if(UL. css("display")=="none"){
UL.css("display","block");
}
else{
UL.css("display"," none");
}
});
});




The second implementation method:

Copy code The code is as follows: 2.



The third implementation method:

You can use show and hide provided by Jquery to complete the display and hide effects with easing. Since the two methods are similar, you can use toggle directly to complete.

Copy code The code is as follows: 3.

$(function(){

$(".topicList h3").toggle(function(){
$(this).next("ul").css("display", "none");
},function(){
$(this).next("ul").css("display","block");
});
} );




The fourth implementation method:

toggle If there are two parameters and both are functions, it means the first Click to execute the first function, and click the second to execute the second function.

Copy code The code is as follows: 4.

$(function(){

$(".topicList h3").toggle(topicHandler,topicHandler);
function topicHandler(){
//You can use fadeIn, show, slideDown Complete the display of a certain container
//Use fadeOut, hide, slideUp to complete the hiding of a certain container
//So the rotation between the two can be completed through each toggle
$(this) .next("ul").toggle(1000);
}
});