列单击“问题”

Question

我有两列...我要打开的右列，当点击它的标题时显示内容，或点击左栏中的相应值...并在点击另一个值时关闭。谢谢你的帮助。

<table>
    <tr>
       <th>1</th>
       <td>
           <div class="showMeOnClick">stuff</div>
       </td>
    </tr>
    <tr>
       <th>2</th>
       <td>
           <div class="showMeOnClick">different stuff</div>
       </td>
    </tr>
    <tr>
       <th>3</th>
       <td>
           <div id="showMeOnClick">stuff</div>
       </td>
    </tr>
</table>

$('th').each(function() {
    $(this).click(function() {
        $(this).find('td').toggle();
    });
});

Answer 1

$('th').click(function(){
  $('.showMeOnClick').hide(); // hide everything
  $(this).siblings('td').find('.showMeOnClick').show(); // show div in the same row
});

如果你想捕获div是否已经可见（不隐藏它并再次显示，请使用一个类）

$('th').click(function(){
    if ($(this).is('.active') == false) {
      $('th').removeClass('active');
      $('.showMeOnClick').hide(); // hide everything
      $(this).addClass('active').siblings('td').find('.showMeOnClick').show(); // show div in the same row
    }
});