Question

我有两个与其目标表单ID相关的类（login-form和register-form）的链接，他们想要切换。我还有一个预定义的'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;
    });

这个比第一个更差:(

有任何纠正行为的建议吗？

我想要的是点击类登录表单的链接，所以用ID登录表格切换表单，如果打开则隐藏注册表单。

非常感谢任何帮助。感谢。

Answer 1

在切换课程或尝试隐藏课程之前，尝试对“slideToggle”效果当前正在运行的任何元素使用.stop()方法，例如：

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

切换两个div和类

1 个答案: