jQuery / PHP：如何让 slideToggle 只打开一行而不是全部？答案

【问题标题】：jQuery / PHP: How to make slideToggle open only one row instead of all?jQuery / PHP：如何让 slideToggle 只打开一行而不是全部？
【发布时间】：2017-09-11 19:05:15
【问题描述】：

我的表有一个小问题，用 DIV 编码。如果我点击一行，它会打开每一行，但我只想打开我点击的那一行，逻辑上。这是我的例子：

http://jsfiddle.net/autodidact/QPP5S/11/

问题代码

<div class="table">
<div class="table_headline">
<div class="cell_1">When?</div>
<div class="cell_2">What?</div>
<div class="cell_3">Who?</div>
<div class="cell_4">Where?</div><br>
</div>  

<div class="row">
<div class="cell_1">Date</div>
<div class="cell_2">Concert</div>
<div class="cell_3">Artist #1 + Artist #2 + Artist #3</div>
<div class="cell_4">Venue</div><br>
</div>
<div class="info">Infos</div>

<div class="row">
<div class="cell_1">Date</div>
<div class="cell_2">Concert</div>
<div class="cell_3">Artist #1 + Artist #2 + Artist #3</div>
<div class="cell_4">Venue</div><br>
</div>
<div class="info">Infos</div>

<div class="row">
<div class="cell_1">Date</div>
<div class="cell_2">Concert</div>
<div class="cell_3">Artist #1 + Artist #2 + Artist #3</div>
<div class="cell_4">Venue</div><br>
</div>
<div class="info">Infos</div>
</div>

<script>$(document).ready(function() {
$('.row').on('click', function() {
    $(this).closest('.table').find('.info').slideToggle();
})
})
</script>

编辑：我正在使用 PHP 来获取所有事件。所以小提琴代码只是一个例子。

编辑#2：添加了问题代码

【问题讨论】：

请在您的帖子中发布问题代码以及jsfiddle的链接（meta.stackexchange.com/questions/84342/…）

标签： jquery events row slidetoggle

【解决方案1】：

您可以简单地将.closest('.table').find('.info') 替换为.next('.info')。

演示：http://jsfiddle.net/8QqCh/

您选择了类为.info 的所有元素，而不仅仅是下一个元素。

查看 .next() 的 jQuery 文档

【讨论】：

【解决方案2】：

改变这个：

$(this).closest('.table').find('.info').slideToggle();

为此：

$(this).next().slideToggle();

【讨论】：

【解决方案3】：

试试这个作为 jquery 选择器：

$('.row').on('click', function() {        
    $(this).next('.info').slideToggle();  
})

【讨论】：