0

複数のフォームを保持するコンテナー (#main_Container) があります。各フォームは、独自のコンテナー ( .module ) 内にあります。各 (.module) コンテナー内に、フォームを展開したり折りたたんだりできるようにする必要がある 2 つのアイコンがあります。ただし、親コンテナーで動作させることはできません。展開または縮小をクリックするたびに、すべてのフォームが影響を受けます。

<script>
    $(document).ajaxSuccess(function () {
        $("form.common").hide();

        $(".expand").click(function(){
            $(this).closest("form.common").show();
        });

        $(".collapse").click(function () {
            $(this).closest("form.common").hide();
        });
    });
</script>

<div id="main_Container">

    <div class="module">
        <h3>Customer Activity Log</h3>
        <div class="module_actions">
            <span class="icons_small right expand">+</span> <!-- -->
            <span class="icons_small right collapse">-</span> <!-- -->
        </div>
        <form class="common">
            <p>Form Stuff</p>
        </form>
    </div>

    <div class="module">
        <h3>Customer Activity Log</h3>
        <div class="module_actions">
            <span class="icons_small right expand">+</span> <!-- -->
            <span class="icons_small right collapse">-</span> <!-- -->
        </div>
        <form class="common">
            <p>Form Stuff</p>
        </form>
    </div>

</div>
4

3 に答える 3

4

.closest()セット内の要素を検索し、要素自体をテストし、DOM ツリー内のその祖先をたどることによって、セレクターに一致する最初の要素を取得します。

あなたのDOM構造によれば、form.commonは兄弟要素で.expandあり、.collapse親です。

試す：

$(document).ajaxSuccess(function () {
     $("form.common").hide();
     $(".expand").click(function(){
         $(this).parents().next("form.common").show();
     })
     $(".collapse").click(function() {
         $(this).parents().next("form.common").hide();
     });
 });

WORKING DEMO

于 2013-09-16T16:12:07.457 に答える
0

展開/折りたたみを操作するには、ID を使用すると非常に役立ちます。解決策は、各フォームに ID を追加し、データ属性を操作することです。次のようになります。

HTML

<div class="module">
<h3>Customer Activity Log</h3>
<div class="module_actions">
   <span class="icons_small right expand" data-target="#form1">+</span> <!-- -->
   <span class="icons_small right collapse" data-target="#form1">-</span> <!-- -->
</div>
<form class="common" id="form1">
<p>Form Stuff</p>
</form>

</div>

JS

 $(".expand").click(function(evt){
   evt.preventDefault();

   var form = $(this).data("target");
   $(form).show();
});

$(".collapse").click(function(evt){
   evt.preventDefault();

   var form = $(this).data("target");
   $(form).hide();
});

フィドル

HTML を編集できない場合は、@Unknown の回答が最適な方法です。

于 2013-09-16T16:18:21.213 に答える