您是否可以保持一系列父元素的高度不变，同时允许其中一个具有单击子元素的元素的高度进行调整？
您是否可以保持一系列父元素的高度不变，同时允许其中一个具有单击子元素的元素的高度进行调整？
提问于 2019-08-19 12:20:56
我有一系列元素，每个元素都包含一个隐藏的表单元素。每个表单元素及其子元素都分配了完全相同的类名。在单击元素中的按钮时，我希望只显示该元素中的form元素，并自动调整元素的高度，而将其他元素中的form元素隐藏起来，使其他元素的高度保持不变。
我尝试使用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。
请帮助我完全隔离单击事件句柄的效果，以便其他元素的高度保持不变。
回答 2
Stack Overflow用户
发布于 2019-08-19 12:50:17
我不知道什么是vendorWrapper，也不知道为什么要使用内联事件处理程序，也不知道css是什么样子，但也许这个示例会有所帮助
$(".query").on("click", function() {
$(this).next('.commentForm').css({
"display": "block"
});
});.filler {
height: 100px;
border: 1px solid;
}
.commentForm {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="wrapper">
<button class="query">Show a form</button>
<form class="commentForm">
<div class="filler"></div>
</form>
</div>
<div class="wrapper">
<button class="query">Show a form</button>
<form class="commentForm">
<div class="filler"></div>
</form>
</div>
<div class="wrapper">
<button class="query">Show a form</button>
<form class="commentForm">
<div class="filler"></div>
</form>
</div>
Stack Overflow用户
发布于 2019-08-19 13:06:42
如果您只将以下内容添加到选择器中，则示例：
$(this,'.wrapper')或者试着这样做：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/57550452
复制相关文章
相似问题
腾讯云开发者
