jqueryを使用してクリックするとdivを表示/非表示にします
-
29-09-2019 - |
質問
私は4つのdivを持っています、そして、私はそれらの1つを見せて他のものを隠したいナビゲーションをクリックします。私はそれを機能させていますが、それが私が知っているほどスムーズではないと感じています。ここに私が持っているものがあります。
$('#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');
});
});
解決
滑らかさや欠如は、コードのせいではありません。一部のブラウザは遅いです。 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');
});
});
他のヒント
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');
});
}
パフォーマンスは多くのことに依存します(FireBugはオン、Divのコンテンツ、Divのスタイル、半透明の背景など) - 貧しいJavaScriptだけでなく。
それがよりクリーンなアプローチの場合、あなたはこのようなものについてどうですか:
$(".my4Divs").click(function() {
var self = this;
$(".my4Divs").each(function() {
if(self == this) {
$(self).addClass("selected");
...
...
return;
}
$(this).removeClass("selected");
...
...
});
});
所属していません StackOverflow