单击标签时显示TD内部的div，关闭其他标签

Question

我的TD元素中有锚标签和div，当单击锚标签时，我想将它们显示出来。 另外，我希望其他人单击时关闭，如果已经打开。

HTML：

<td>
<a href="#"><img src="images/1.jpg" /></a>
<div class="test"><p>test</p></div>
</td>

<td>
<a href="#"><img src="images/1.jpg" /></a>
<div class="test"><p>test</p></div>
</td>   

我尝试使用此JQuery，但由于某种原因，我必须单击两次以使其第一次显示div，如果再单击第二个，则第一个不会关闭。 我不需要添加任何类。

<script type="text/javascript">
$(document).ready(function() {
    $('.test').hide();
    $('td a').on('click', function() {
        var state = $(this).next('.test').is('.open');
        if (state) {
            $(this).removeClass('active').next('.test').removeClass('open').show();
        }else{
            $(this).addClass('active').next('.test').addClass('open').hide()
                   .siblings('.test').removeClass('open').show().end()
                   .siblings('.test').not(this).removeClass('active');
        }
    });
});
</script>   

Answer 1

只是这样做：

$(document).ready(function() {
    $('td a').on('click', function() {
        $(this).closest('tr').find('td div.test.open').removeClass('open');
        $(this).next('div.test').addClass('open');
    });
});

在您的CSS中，

div.test { display:none; }
div.test.open { display:'block'; }

Answer 2

您可以在不保存状态的情况下使用toggleClass（）切换.active类和toggle（）来显示/隐藏当前测试div 。

$('.test').hide();

$('td a').on('click', function () {
  var $target = $(this).next('.test'); 

  $('.test').not($target).hide();
  $target.toggleClass('.active').toggle();
});

此外，我还使用not（）来隐藏所有其他非当前test divs 。

---

演示 -切换Divs

---

我在DEMO中使用了以下HTML

<table>
  <tbody>
    <tr>
      <td> <a href="#"><img src="http://placehold.it/100x50" /></a>

        <div class="test">
          <p>test</p>
        </div>
      </td>
      <td> <a href="#"><img src="http://placehold.it/100x50" /></a>

        <div class="test">
          <p>test</p>
        </div>
      </td>
    </tr>
  </tbody>
</table>