Показать / Скрыть div по клику с помощью jQuery - PullRequest
Новая
       3

Показать / Скрыть div по клику с помощью jQuery

0 голосов
/ 24 июня 2010

У меня есть 4 деления, и по щелчку навигации я хочу показать один из них и скрыть остальные. У меня это работает, но я чувствую, что это не так гладко, как я знаю, это, безусловно, мой код, который нужно реорганизовать! Вот что у меня есть. 

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

Ответы [ 3 ]

2 голосов
/ 24 июня 2010

Программирование 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

1 голос
/ 24 июня 2010

Гладкость или отсутствие не является ошибкой вашего кода. Некоторые браузеры работают медленно. Это просто не то, что можно исправить из 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');
  });
});
0 голосов
/ 24 июня 2010

Если это более чистый подход, вы ищете что-то вроде этого: 

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