我有一个包含多个表单的容器(#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>
答案 0 :(得分: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 强>
答案 1 :(得分:0)
您正在使用.closest("form.common")
,它只查看所选元素及其父级以上的DOM层次结构。由于<form>
标记不是范围的父标记,因此不会选择它。
您可以使用以下内容:
$(this).closest(".module_actions").next("form.common").show()
答案 2 :(得分: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回答是处理它的最佳方式。