jquery - jquery$.ajaxを使用してフォームを送信する-フォームの表示を変更します

Question

私はこれが私のページのフォームのリストの例です：http：//jsfiddle.net/GSC3x/

うまく機能しますが、ページにリストアイテムがたくさんあると、ユーザーフレンドリーではありません。リスト項目の1つをクリックした後のフォームの表示方法を変更したい。

ある意味で、アイテムをクリックするとフォームがページの中央に表示され、フォームがオンのときは他のリストアイテムが表示されないようにします。以前にクリックしたアイテムをもう一度クリックすると、通常のリストビューに戻ります-それを行う方法は？

@@ UPDATE-ハイパープロフェッショナル画像を追加して、どのように機能するかを示します！：]

Answer 1

$(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 2

代わりに、 $(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();
});

Answer 3

私のコードの下で試してみてください...

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