Переключить два деления и классы - PullRequest
Новая
       25

Переключить два деления и классы

3 голосов
/ 15 апреля 2010

У меня есть две ссылки с классами (форма входа в систему и форма регистрации), относящиеся к их идентификатору целевых форм, которые они хотят переключать. У меня также есть предопределенная функция slideToggle для лучшего переключения.

Это то, что я пробовал до сих пор: 

$('#userbar a').click(function() {
      var c = $(this).attr('class');
      $('#userbar a').removeClass('active');
      $(this).toggleClass('active');
      $('#register-form,#login-form').hide(); //bad, causing flashy
      $('#' + c).slideToggle('slow');

        return false;
    });

При этом у меня возникают проблемы со всплывающим окном, и для правильного переключения активных классов при нажатии на другую ссылку у другой ссылки больше не должно быть активного класса. Дополнительная проблема в том, что ссылка не работает при последовательных кликах.

У меня есть еще одна попытка, более длинная: 

$('#userbar a').click(function() {
      var c = $(this).attr('class');
        switch (c) {
        case 'login-form':
            $('#' + c).slideToggle('slow');
            $(this).toggleClass('active');
            $('#register-form').hide();
            break;
        case 'register-form':
            $('#' + c).slideToggle('slow');
            $(this).toggleClass('active');
            $('#login-form').hide();
            break;
        }
        return false;
    });

Этот хуже первого :(

Есть предложения по исправлению поведения?

То, что я хочу, - это когда щелкает ссылка с формой входа в систему, поэтому переключите форму с идентификатором входа в форму и скройте форму регистрации, если она открыта.

Любая помощь будет принята с благодарностью. Спасибо.

1 Ответ

2 голосов
/ 15 апреля 2010

Попробуйте использовать метод .stop() для любых элементов, для которых в данный момент выполняется эффект «slideToggle», прежде чем переключать класс или пытаться его скрыть, например: 

$('#userbar a').click(function() {
  var c = $(this).attr('class');
  $('#userbar a').stop(); //stop any currently running animations, which might be messing with the "hide()" method below
  $('#userbar a').removeClass('active');
  $(this).toggleClass('active');
  $('#register-form,#login-form').hide(); //bad, causing flashy
  $('#' + c).slideToggle('slow');

    return false;
});
...