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

这是我页面上表格列表的示例：

它工作得很好，但是当我的页面上有很多列表项时，它对用户并不友好。我想在单击其中一个列表项后更改表单的显示方式

我希望在某种程度上，当我单击该项时，表单显示在页面的中心，当表单打开时，其他列表项不可见-当我再次单击以前单击的项时-它应该返回到正常的列表视图-如何操作

@@更新-添加了超专业图像以显示其工作原理！：]

试试下面我的代码

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

而不是

$（e.target）.next（“.slidingDiv”）.slideToggle（）您可以添加下面的代码以将窗体设置为中心动画

var t=( $(window).height() - $(this).next(".slidingDiv").height() ) /2+$(window).scrollTop();
var l= ($(window).width() - $(this).next(".slidingDiv").width() ) / 2+$(window).scrollLeft();         
$(e.target).next(".slidingDiv").css('position','absolute');
$(e.target).next(".slidingDiv").animate({
left: l,
top: t,
}, 500).show();
});

感谢您的关注，这很好-但我的观点是，带有列表项的整个表单都被移动到页面的中心-现在它只显示在单击的项下-如前所述。@pawel u只需在
.centerDiv
中增加
左
（高于我的样式）。使用firebug将其设置在中心。它仍然不会移动列表项吗？我是说超链接，如果你想移动它，就像div一样。制作一个类，如
centerDiv
say
centerLi
，并在显示表单之前应用它。在显示所有li之前，您还可以通过
removeClass
方法删除
centerDiv
类和
centerLi
类。很酷，但是，当表单在页面中心激活时，您能否设置动画？
var t=( $(window).height() - $(this).next(".slidingDiv").height() ) /2+$(window).scrollTop();
var l= ($(window).width() - $(this).next(".slidingDiv").width() ) / 2+$(window).scrollLeft();         
$(e.target).next(".slidingDiv").css('position','absolute');
$(e.target).next(".slidingDiv").animate({
left: l,
top: t,
}, 500).show();
});