javascript - 切换隐藏/显示Div不起作用。

我有一个容纳多种形式的容器（#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>

最佳答案

.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

关于javascript - 切换隐藏/显示Div不起作用。，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/18832537/