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。

DEMO - 切换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>

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

2 个答案: