javascript - jQuery ranap apabila diklik dalam firefox, bagaimana untuk menyelesaikannya?

Question

<p id='warpBox' class='warp'>点我</p>
<p class='warpp' style="display: none;">
    <img src ='' />
    <p class='title'>图片名称</p>
    <p class='dec'>图片描述</p>
</p>

Ia pada asasnya adalah struktur yang begitu mudah Dengan mengklik pada WarpBox, warpp dipaparkan.

$('#warpBox').on('click',function(e){
    $('.warpp').css({
        'position': 'absolute',
        'top': '50%',
        'left': '35%'
    })
})

Masalah semasa ialah: selepas mengklik, p tersembunyi juga dipaparkan, tetapi ia hilang selepas kilat. Ujian dalam pelayar lain adalah perkara biasa, dan versi jQuery terkini sedang digunakan.
Bagaimana untuk menyelesaikannya? Apa yang silap? Terima kasih!

Answer 1

Akhirnya menemui sebabnya Ternyata Firefox tidak menghalang acara ini selepas melaksanakan acara klik, mengakibatkan penampilan mati ini:

$('#warpBox').on('click',function(e){
    e.stopPropagation();  //OK
    $('.warpp').css({
        'position': 'absolute',
        'top': '50%',
        'left': '35%'
    })
})

Answer 2

Anda harus menulis gaya tersebut ke dalam kelas, dan hanya klik untuk mengawal paparan. Selain itu, jika anda menggunakan kedudukan mutlak, bekas induk mesti menggunakan kedudukan relatif! !