[英]Show/Hide div on click using jQuery
我有4个div,单击导航后,我要显示其中一个并隐藏其他。 我可以使用它,但是我感觉它不像我所知道的那样平稳,它绝对是我的代码,需要重构! 这是我的东西。
$('#details-speakers').click(function() {
$('#home').slideUp('slow', function() {});
$('#sessions-content').slideUp('slow', function() {});
$('#cases-content').slideUp('slow', function() {});
$('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
$('#speakers-content').slideDown('slow', function() {
$('#details-speakers').addClass('selected');
//Remove other classes
$('#details-sessions').removeClass('selected');
$('#details-cases').removeClass('selected');
$('#details-workshops').removeClass('selected');
});
});
$('#details-sessions').click(function() {
$('#home').slideUp('slow', function() {});
$('#speakers-content').slideUp('slow', function() {});
$('#cases-content').slideUp('slow', function() {});
$('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
$('#sessions-content').slideDown('slow', function() {
$('#details-sessions').addClass('selected');
//Remove other classes
$('#details-speakers').removeClass('selected');
$('#details-cases').removeClass('selected');
$('#details-workshops').removeClass('selected');
});
});
$('#details-cases').click(function() {
$('#home').slideUp('slow', function() {});
$('#speakers-content').slideUp('slow', function() {});
$('#sessions-content').slideUp('slow', function() {});
$('html,body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
$('#cases-content').slideDown('slow', function() {
$('#details-cases').addClass('selected');
//Remove other classes
$('#details-speakers').removeClass('selected');
$('#details-sessions').removeClass('selected');
$('#details-workshops').removeClass('selected');
});
});
Ctrl + C和Ctrl + V编程会直接导致地狱...我认为您可以执行以下操作:
var divs = $('#details-speakers, #details-sessions, #details-cases');
divs.click(function () {
divs.not(this).add('#home').slideUp('slow');
// animation with home and body
$(this).slideDown('slow', function () {
$(this).addClass('selected');
divs.not(this).removeClass('selected');
});
}
而性能取决于很多因素(萤幕打开,div的内容,div的样式,半透明的背景等)–不仅仅是糟糕的javascript。
平滑或缺乏平滑并不是代码的错。 有些浏览器运行缓慢。 JS不能解决这一问题。
您可以使代码更短,但我认为不会有任何实质性的性能改进。
$('#details-speakers').click(function() {
$('#home, #sessions-content, #cases-content').slideUp('slow');
$('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
$('#speakers-content').slideDown('slow', function() {
$('#details-speakers').addClass('selected');
//Remove other classes
$('#details-sessions, #details-cases, #details-workshops').removeClass('selected');
});
});
$('#details-sessions').click(function() {
$('#home, #speakers-content, #cases-content').slideUp('slow');
$('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
$('#sessions-content').slideDown('slow', function() {
$('#details-sessions').addClass('selected');
//Remove other classes
$('#details-speakers, #details-cases, #details-workshops').removeClass('selected');
});
});
$('#details-cases').click(function() {
$('#home, #speakers-content, #sessions-content').slideUp('slow');
$('body').animate({scrollTop: $("#details").offset().top - 16}, 200, "swing");
$('#cases-content').slideDown('slow', function() {
$('#details-cases').addClass('selected');
//Remove other classes
$('#details-speakers, #details-sessions, #details-workshops').removeClass('selected');
});
});
如果这是一种更清洁的方法,那么您正在寻找类似以下内容的方法:
$(".my4Divs").click(function() {
var self = this;
$(".my4Divs").each(function() {
if(self == this) {
$(self).addClass("selected");
...
...
return;
}
$(this).removeClass("selected");
...
...
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.