عرض/إخفاء Div عند النقر على استخدام jQuery

Question

لقد حصلت على 4 divs وعند النقر على التنقل ، أريد أن أعرض أحدهم وإخفاء الآخرين. أنا أعمل ولكني أشعر بأنه ليس سلسًا كما أعرف أنه يمكن أن يكون ، إنه بالتأكيد رمزتي التي يجب إعادة تشكيلها! هيريس ما لدي.

$('#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');
  });
});

Answer 1

إن نعومة أو عدمه ليس خطأ الكود الخاص بك. بعض المتصفحات بطيئة. إنه ليس شيئًا يمكن إصلاحه من 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');
  });
});

Answer 2

يؤدي برمجة 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 موجود ، محتوى divs ، أسلوب divs ، خلفيات نصف الشفافة وما إلى ذلك)-وليس فقط جافا سكريبت الفقيرة.

Answer 3

إذا كان نهجًا أنظفًا ، فأنت تبحث عن شيء مثل هذا:

$(".my4Divs").click(function() {
    var self = this;
    $(".my4Divs").each(function() {
       if(self == this) {
          $(self).addClass("selected");
          ...
          ...
          return;
       }
       $(this).removeClass("selected");
       ...
       ...
    });
});