jquery - 使用 jquery $.ajax 提交表单 - 更改表单的 View

Question

这是我的页面上的表单列表示例:http://jsfiddle.net/GSC3x/

它工作得很好，但是当我的页面上有很多列表项时，它对用户来说非常不友好。我想更改单击列表项之一后显示表单的方式。

我希望以某种方式实现，当我单击该元素时，表单显示在页面中央，而当表单打开时，其他列表项不可见 - 当我再次单击之前单击的元素时- 它应该返回到正常 ListView - 怎么做？

@@UPDATE - 添加了超专业的图像来展示它应该如何工作! :]

Answer 1

尝试下面的代码...

CSS 附加在下面

ul{
    position:relative;
}

.centerDiv{
    position:absolute;
    z-index:1000;
    top:0px;
    left:30px;
}​

和 JavaScript

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

    $('.show_hide').click(function(e){
       if( $(e.target).next(".slidingDiv").css('display') != 'block'){
            $(".slidingDiv").hide();
            $(".show_hide").hide();
            $(e.target).show();
            $(e.target).next(".slidingDiv").addClass("centerDiv");
            $(e.target).next(".slidingDiv").slideToggle();
       }else{
              $(".slidingDiv").hide();
                $(".show_hide").show();
       }   
    });
});