切換隱藏/顯示Div無效。

Question

我有一個容納多種形式的容器（#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>

Answer 1

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

工作演示

Answer 2

您正在使用.closest("form.common") ，它僅查看選定元素及其在DOM層次結構中的父元素。 由於<form>標記不是跨度的父項，因此將不會選擇它。

您可以使用類似：

$(this).closest(".module_actions").next("form.common").show()

Answer 3

要使用展開/折疊，如果您使用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答案是處理它的最佳方法。