Rumah > Artikel > hujung hadapan web > Bagaimana untuk melaksanakan klik jquery untuk dipaparkan dan klik di tempat lain untuk bersembunyi

Bagaimana untuk melaksanakan klik jquery untuk dipaparkan dan klik di tempat lain untuk bersembunyi

WBOYasal: 2021-12-13 19:12:567760semak imbas

Kaedah: 1. Gunakan pernyataan "$(elemen butang).klik(fungsi(){$(elemen).tunjukkan();});" untuk merealisasikan mengklik butang untuk memaparkan elemen; . Gunakan "$( The "body *:not(element)")", kaedah klik() dan hide() melaksanakan klik pada tempat lain untuk menyembunyikan elemen.

Persekitaran pengendalian tutorial ini: sistem windows10, versi jquery3.2.1, komputer Dell G3.

Cara jquery melaksanakan klik untuk memaparkan dan mengklik di tempat lain untuk disembunyikan

Dalam jquery, anda boleh menggunakan kaedah klik, :bukan pemilih, sembunyikan () dan show() kaedah untuk merealisasikan kesan mengklik untuk menunjukkan dan mengklik di tempat lain untuk bersembunyi.

Mari kita ambil contoh untuk melihat cara memaparkan elemen butang apabila mengklik padanya, dan menyembunyikan elemen apabila mengklik pada elemen selain butang.

Contoh adalah seperti berikut:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("body *:not(.intro)").click(function(){
    $("div").hide();
  });
  $(".intro").click(function(){
    $("div").show();
  });
});
</script>
<style type="text/css">
    div{
        width:200px;
        height:200px;
        background-color:red;
    }
</style>
</head>
<body>
<div></div>
<button class="intro">按钮</button>
</body>
</html>

Hasil keluaran:

Tutorial video berkaitan yang disyorkan: tutorial video jQuery

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan klik jquery untuk dipaparkan dan klik di tempat lain untuk bersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

jquery function 选择器

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mari kita bincangkan tentang modul Nodejs-cluster dan perkenalkan cara menggunakannya.Artikel seterusnya：Mari kita bincangkan tentang modul Nodejs-cluster dan perkenalkan cara menggunakannya.

Artikel berkaitan

Lihat lagi