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

Toggling hide/show Div's is not working.

本文关键字：Div 不起作用 显示 隐藏      更新时间：2023-09-26

我有一个包含多个表单的容器（#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();
     });
 });

工作演示

您正在使用 .closest("form.common") ，它只查看所选元素及其在 DOM 层次结构中的父元素。由于 <form> 标记不是范围的父标记，因此不会选择它。

您可以使用以下内容：

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

要使用展开/折叠，如果您使用 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答案是处理它的最佳方式。

相关文章：