期望的结果
我有一个充满数据的表。在每行的<td>中是模态触发器。我希望该模态触发器弹出一个隐藏的模态，该模态位于<td>之外，但仍然在表中（在它关闭</tr>之后）。单击每个触发器仅将打开其隐藏的<div>。
问题
我似乎无法将隐藏的<div>定位到<tr>的某个级别和兄弟级别。我尝试了很多.next，.parent，.closest和.find的变种 - 但无济于事。如果隐藏的<div>直接位于</td>下面的jQuery之后，我可以打开它，但我不希望隐藏的<div>那里......我想要它</tr>如下所示。有人可以赐教我吗？
CODEPEN
codepen（更新以反映来自guest271314的选定答案）
HTML
<div class="container">
<table>
<!-- ROW 1 -->
<tr>
<td>
<div class="quickViewTrigger">MODAL TRIGGER 1</div>
</td>
<td>misc cell 1</td>
<td>misc cell 2</td>
</tr>
<div class="quickViewContainer">
<div id="quickViewCloseButton" class="close" style="margin-right:10px;"><span></span></div>
<div class="quickViewTitle">MODAL 1</div>
<div class="quickViewBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus dolor, vestibulum id fermentum molestie, tempor in ligula. Sed quis leo a erat vehicula hendrerit. Morbi ac elementum risus. Donec pretium euismod sapien quis sagittis. Phasellus sit amet
volutpat sem.</div>
</div>
<!-- ROW 2 -->
<tr>
<td>
<div class="quickViewTrigger">MODAL TRIGGER 2</div>
</td>
<td>misc cell 1</td>
<td>misc cell 2</td>
</tr>
<div class="quickViewContainer">
<div id="quickViewCloseButton" class="close" style="margin-right:10px;"><span></span></div>
<div class="quickViewTitle">MODAL 2</div>
<div class="quickViewBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus dolor, vestibulum id fermentum molestie, tempor in ligula. Sed quis leo a erat vehicula hendrerit. Morbi ac elementum risus. Donec pretium euismod sapien quis sagittis. Phasellus sit amet
volutpat sem.</div>
</div>
</table>
</div>
JQUERY
$(document).ready(function () {
"use strict";
// OPEN MODAL ON TRIGGER CLICK
$(".quickViewTrigger").on('click', function () {
var $quickview = $(this).next(".quickViewContainer");
$quickview.dequeue().stop().slideToggle(500, "easeInOutQuart");
$(".quickViewContainer").not($quickview).slideUp(200, "easeInOutQuart");
});
// CLOSE MODAL WITH MODAL CLOSE BUTTON
$(".close").click(function() {
$(".quickViewContainer").fadeOut();
});
});
答案 0 :(得分：2)
<div>不是<table>元素
答案 1 :(得分：1)
尝试这样的事情。 codepen
<强> HTML：
<div class="container">
<table>
<tr>
<td>
<div class="quickViewTrigger" data-modal="1">MODAL TRIGGER 1</div>
</td>
<td>misc cell 1</td>
<td>misc cell 2</td>
</tr>
<tr>
<td>
<div class="quickViewTrigger" data-modal="2">MODAL TRIGGER 2</div>
</td>
<td>misc cell 1</td>
<td>misc cell 2</td>
</tr>
</table>
<div class="modals">
<div class="quickViewContainer" id="modal1">
<div class="close" style="margin-right:10px;"><span></span></div>
<div class="quickViewTitle">MODAL 1</div>
<div class="quickViewBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus dolor, vestibulum id fermentum molestie, tempor in ligula. Sed quis leo a erat vehicula hendrerit. Morbi ac elementum risus. Donec pretium euismod sapien quis sagittis. Phasellus sit
amet volutpat sem.</div>
</div>
<div class="quickViewContainer" id="modal2">
<div class="close" style="margin-right:10px;"><span></span></div>
<div class="quickViewTitle">MODAL 2</div>
<div class="quickViewBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lacus dolor, vestibulum id fermentum molestie, tempor in ligula. Sed quis leo a erat vehicula hendrerit. Morbi ac elementum risus. Donec pretium euismod sapien quis sagittis. Phasellus sit
amet volutpat sem.</div>
</div>
</div>
<强> JS：
$(document).ready(function() {
"use strict";
// OPEN MODAL ON TRIGGER CLICK
$(".quickViewTrigger").on('click', function(e) {
e.preventDefault();
var $quickview = $("#modal" + $(this).data('modal'));
$quickview.dequeue().stop().slideToggle(500, "easeInOutQuart");
$(".quickViewContainer").not($quickview).slideUp(200, "easeInOutQuart");
});
// CLOSE MODAL WITH MODAL CLOSE BUTTON
$(".close").click(function() {
$(".quickViewContainer").fadeOut();
});
});
<强>的CSS：
.modals .quickViewContainer{
display:none;
}
.close{
position:absolute;
right:3px;
top:3px;
width:10px;
height:10px;
border: 1px solid #ccc;
}
Div不是表的有效子项，因此将其移动到另一个div。
答案 2 :(得分：0)
<强> Example
我没有完成它，但我认为你能够从这里拿出一些东西。我已经包含了jQuery 1.12，这是一个用于隐藏/取消隐藏模态的简单函数。
你所要做的就是弄清楚如何默认隐藏它，并根据自己的喜好进行调整。
$("#triggerOne").click(function(){
$("#modalOne").fadeToggle("slow", "linear")
});
用按钮替换该div，并为每个按钮指定id。我拥有它的方式你必须为每个模态触发器编写新的函数，但如果你使用了一个类，它会同时隐藏/取消隐藏它们。
我还是js / jquery的新手，所以我相信还有更好的方法可以做到。
希望这能为您指明方向：）
答案 3 :(得分：0)
试试这个
$(".quickViewTrigger").on('click', function () {
var rowIndex = $('.container table tr').index($(this).closest('tr'));
//console.log(rowIndex);
var $quickview = $(".quickViewContainer").eq(rowIndex);
// console.log($quickview);
$quickview.dequeue().stop().slideToggle(500, "easeInOutQuart");
$(".quickViewContainer").not($quickview).slideUp(200, "easeInOutQuart");
});
// CLOSE MODAL WITH MODAL CLOSE BUTTON
$(".close").click(function() {
$(".quickViewContainer").fadeOut();
});
});