Jadi saya perlu menyembunyikan menu saya dan hanya menunjukkannya apabila saya menekan tab. Apa yang saya lakukan ialah menulis kelas berikut:
.not-visible {
transform: scale(0);
height: 0px;
width: 0px;
margin: 0;
padding: 0;
visibility: hidden;
}
.not-visible * {
margin: 0;
padding: 0;
height: 0px;
width: 0px;
}
Ini berfungsi dengan sempurna supaya kandungan tidak mengambil sebarang ruang. Tetapi terdapat masalah di sini - apabila saya melakukan ini, imej SVG saya tidak dipaparkan. Selepas beberapa alasan, saya mendapati bahawa jika anda mempunyai keterlihatan: tersembunyi; dalam kelas dan dalam item di dalam kelas ini lebar + tinggi = 0, ia akan berkelakuan seperti ini. Mengapa SVG berfungsi seperti ini? Saya cuba menulis sendiri 3 parameter ini
.repair-price-box .button-close {
border: 1px solid black;
visibility: visible;
height: 25px;
width: 25px;
}
Tetapi ia tidak mengubah apa-apa. Ia seperti sebaik sahaja saya menukar parameter ini, mereka memecahkan SVG selama-lamanya (selagi kod ini wujud).
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Apa pun, saya telah menemui penyelesaiannya...jadi saya dapati bahawa saya sebenarnya tidak memerlukan 3 baris kod ini. Apa yang saya perlukan ialah:
.not-visible { transform: scale(0); height: 0px; width: 0px; margin: 0; padding: 0; opacity: 0; } .not-visible * { margin: 0; padding: 0; }Bagaimanapun, saya tidak tahu mengapa 3 baris kod ini memecahkan SVG, tetapi saya akhirnya menemui penyelesaiannya (saya mencari selama berminggu-minggu dan tidak dapat mencari penyelesaian)