Ketika saya mengklik span, saya ingin menyembunyikan tag div di bawahnya, tetapi kode saya tidak berfungsi. Saya ingin mendengar pendapat Anda tentang cara merekonstruksi kode jQuery.


    $(document).on("click", ".show-table-bottom > span", function() {
      if ($(this).next().css("display") == "none") {
        $(this).next().show();
      } else {
        $(this).next().hide();
      }
    });

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <table>
      <tr>
        <td class="show-table-bottom" colspan=3 style="height:65%; vertical-align: top; padding:2%;">
          <span>번역</span>
          <div style="display:none; border:1px dashed gray;">
            <div>
              <br>
              <h4><b>ASDSA</b></h4><br><br><br><br> aSDASD
            </div>
          </div>
        </td>
      </tr>
    </table>

1
박보근 3 Juni 2019, 12:02

2 jawaban

Jawaban Terbaik

Anda dapat menyederhanakan logika dan hanya menggunakan.toggle() pada klik rentang. .toggle() mengaktifkan visibilitas antara display: block dan dispaly: none - jadi Anda tidak memerlukan logika kondisional.

$(document).on("click", ".show-table-bottom > span", function() { $(this).next().toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="show-table-bottom" colspan=3 style="height:65%; vertical-align: top; padding:2%;">
      <span>번역</span>
      <div style="display:none; border:1px dashed gray;">
        <div>
          <br>
          <h4><b>ASDSA</b></h4><br><br><br><br> aSDASD
        </div>
      </div>
    </td>
  </tr>
</table>
3
gavgrif 3 Juni 2019, 09:16

Tentukan kelas sembunyikan dalam gaya dan kemudian gunakan fungsi jquery toggleClass() untuk menggunakan kelas sembunyikan sakelar

<style>
.hide{
display:none;
}
</style>
<script>
$(document).on("click", ".show-table-bottom > span", function() {
      $(this).next('div').toggleClass('hide');
    });
</script>

Semoga ini membantu Anda

0
Balvinder Singh 3 Juni 2019, 11:07