1

我有 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>
4

2 回答 2

0

这样做：

$(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'; }
于 2013-01-25T22:41:37.950 回答
0

您可以在不保存状态的情况下使用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不是当前的。

演示- 切换 div

我在 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>
于 2013-01-25T22:46:18.807 回答