Home > Web Front-end > JS Tutorial > An encapsulated js code-----example of expand/collapse effect_javascript skills

An encapsulated js code-----example of expand/collapse effect_javascript skills

WBOY
Release: 2016-05-16 17:30:18
Original
1268 people have browsed it

This is the first time I have completely encapsulated small special effects by myself. I am a little excited to share it with you. I hope it can be helpful to children who are exploring like me.
js part:

Copy code The code is as follows:

var show_obj = function(obj,at,ob){
$(obj).bind('click', function(){
var showTxt = $(this).children(at);
//alert($(at).html());
//alert(sObj);
//alert();
//alert($(this).parent().children(p).html());
if(showTxt .html() == ' '){
showTxt.html('-')
}else{
showTxt.html(' ')
}
$(this).parent ().children(ob).slideToggle(300);
})
}

html Quote:
Copy code The code is as follows:

$(function(){
show_obj('.slide_show','.slide_show a', '.p-silde');
})
html code:


PS: Remember to quote the jQuery framework, which is compatible with ie6 and above, Firefox, Google, and ie6 has not been tested. You can test it yourself.
Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template