Question

我有一个隐藏的div，我使用jQuery slideDown()和slideUp()来展示。我隐藏的div有一个我使用的表单，当字段为空时我使用CSS设置焦点，如下所示：

$('#form').submit(function(){
  var name = $('.name').val();
  if(name == '') {
    $('.name').focus().css({'border':'1px solid #f00'});
  }
  // here goes ajax code
  return false;
});

我展示的表格是这样设置的：

$('.show_hidden_form').click(function(){
  $('#form_div').slideDown('slow');
});

表单以这种方式隐藏：

$('.hide_hidden_form').click(function(){
  $('#form_div').slideUp('slow');
});

但是当我隐藏div（它包含表单）时，我的问题就出现了。我希望它重置默认的表单样式。

这可能吗？如果是这样，我该怎么做？

Answer 1

您可以创建一个包含此表单的默认样式的类和另一个（或多个类）来描述其他状态（即NOT DEFAULTS），然后使用

 $('#myForm').addClass('submitted')

和

 $('#myForm').removeClass('defualt')

：）

Answer 2

只需切换课程。建议使用切换类，因为它更快，更容易维护并将样式与代码分开。

 //add to your css file
 border { border: 1px solid #f00; }

 //when focus show the border
 $('.name').focus().addClass('border');

 //when unfocus remove the border
 $('.hide_hidden_form').click(function(){
   $('#form_div').slideUp('slow');
   $('.name').removeClass('border');
 });

Answer 3

只需向slideUp添加回调函数：

$('.hide_hidden_form').click(function(){
   $('#form_div').slideUp('slow', function() {
       $('.name').focus().css({'border':'0'});   
   }); 
});

（顺便说一句，你真的应该使用一个ID作为“name”字段而不是一个类，因为显然你只有一个。）

如果我使用jQuery隐藏面板，如何恢复设置？

3 个答案: