0

I have a container (#main_Container) that holds multiple forms. Each form is within it's own container( .module ). Within each of the (.module) containers, I have 2 icons which need to be able to expand and collapse their form. However, I cannot get them to act on their parent container. Every time I click expand or contract, all forms are affected.

<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

您正在使用，它仅在DOM 层次结构中.closest("form.common")查看选定元素及其父元素。由于<form>标签不是跨度的父级，因此不会被选中。

你可以使用类似的东西：

$(this).closest(".module_actions").next("form.common").show()
于 2013-09-16T16:15:27.697 回答
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 回答