javascript - 您能否保持一系列父元素的高度相同，同时调整其中一个带有单击的子元素的高度？

Question

我有一系列元素，每个元素都包含一个隐藏的表单元素。每个表单元素及其子元素都分配了完全相同的类名。单击元素中的按钮后，我只想让该元素内的表单元素显示并自动调整元素的高度，同时隐藏其他元素中的表单元素，以便其他元素的高度保持不变。

我尝试使用 eq() jQuery 方法定位包含在与单击元素相同的元素中的表单元素。

<div class="wrapper">
 <button onclick="query()">Show a form</button>
 <form class="commentForm">....</form>
</div>
<script>
function query(){
 var index = $(this).parent('.wrapper').index() - 1; 
 $('.wrapper').eq(index).children('.commentForm').css({
 "display" : "block"
 });
});
</script>

单击按钮元素时，表单元素会显示，并且其父元素的高度会自动更改以合并表单。但是，与此同时，其他元素的高度会更改以匹配该元素的高度，即使它们的表单元素仍然隐藏（！）。

显然，脚本正在作用于其他元素，即使其他元素的 css 显示 display: none。

请帮我完全隔离单击事件句柄的效果，以便其他元素的高度保持不变。

标签： javascriptjquerycssheight

Answer 1

如果您只将其添加到您的选择器中，例如：

$(this,'.wrapper')

或者试试这个：