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を表示するには2回クリックする必要があり、2番目のものをクリックすると最初のものは閉じません。クラスを追加する必要はありません。

<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

トグルクラス（）を使用して.activeクラスを切り替え、トグル（）を使用して現在のテストを表示/非表示にすると、状態を保存せずに実行できます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を切り替えます

デモで次の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 に答える
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 に答える