0

DIV でコード化されたテーブルに小さな問題が 1 つあります。行をクリックすると、すべての行が開きますが、クリックした行だけを論理的に開きたいです。これが私の例です：

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：問題コードを追加

4

3 に答える 3

2

.closest('.table').find('.info')で簡単に置き換えることができます.next('.info')。

デモ: http://jsfiddle.net/8QqCh/

.info次の要素だけでなく、クラスが のすべての要素を選択していました。

.next()については、jQuery のドキュメントを確認してください。

于 2012-09-12T13:23:58.630 に答える
2

これを変える：

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

このため：

$(this).next().slideToggle();
于 2012-09-12T13:24:19.237 に答える
1

代わりにこれを jquery セレクターとして試してください。

$('.row').on('click', function() {        
    $(this).next('.info').slideToggle();  
})
于 2012-09-12T13:27:52.317 に答える