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

Question

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

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

我希望它在某种程度上，当我单击该项目时，表单显示在页面的中心，并且当表单打开时其他列表项是不可见的 - 当我再次单击我之前单击的项目时 - 它应该返回正常列表视图 - 怎么做？

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

Answer 2

$(document).ready(function(){

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

        $('.show_hide').click(function(e){
             $('.show_hide').not($(this)).next(".slidingDiv").hide();
             $(e.target).next(".slidingDiv").slideToggle();
        });
});

Answer 3

而不是 $(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();
});