I have two similar functions that I would like to combine so that I can use anywhere throughout the site. It's a simple jquery slideUp / slideDown effect that finds the div with the class 'hidden' and on click, it shows and hides
$('.clicker1').click(function(){
// grab the hidden content
var desc = $(this).parent().find('.hidden');
// remove toggle class and slide up
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
$(desc).slideUp(400, 'linear');
}
// add toggle class, slide down, and move the page up
else {
var loc = this;
$(desc).slideDown(400, 'linear', function () {
$.scrollTo($(loc).offset().top - 60, 400);
});
$(this).addClass('toggled');
$('.clicker1').not(this).removeClass('toggled');
$('.hidden').not(desc).slideUp(400, 'linear');
}
});
$('.clicker2').click(function(){
// grab the hidden content
var desc = $(this).parent().find('.hidden2');
// remove toggle class and slide up
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
$(desc).slideUp(400, 'linear');
}
// add toggle class, slide down, and move the page up
else {
var loc = this;
$(desc).slideDown(400, 'linear', function () {
$.scrollTo($(loc).offset().top - 60, 400);
});
$(this).addClass('toggled');
$('.clicker2').not(this).removeClass('toggled');
$('.hidden').not(desc).slideUp(400, 'linear');
}
});
Can I create one function and put in my own 'clickerX' and 'hiddenX' ?
It looks like the handlers only differ by the class's they use as selectors. The easiest approach is to write a function which generates a click handler based on the class names. Try the following
var makeHandler = function(className, hiddenClassName, ) {
return function() {
// grab the hidden content
var desc = $(this).parent().find(hiddenClassName);
// remove toggle class and slide up
if ($(this).hasClass('toggled')) {
$(this).removeClass('toggled');
$(desc).slideUp(400, 'linear');
}
// add toggle class, slide down, and move the page up
else {
var loc = this;
$(desc).slideDown(400, 'linear', function () {
$.scrollTo($(loc).offset().top - 60, 400);
});
$(this).addClass('toggled');
$(className).not(this).removeClass('toggled');
$(hiddenClassName).not(desc).slideUp(400, 'linear');
};
};
$('.clicker1').click(makeHandler('.clicker1', '.hidden'));
$('.clicker2').click(makeHandler('.clicker2', '.hidden2'));
Absolutely. You want to write a plugin. There's tons of tutorials on making a jQuery plugin, but the official docs give a good start.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.