Saya mencipta menu mendatar menggunakan CSS, HTML dan jquery. Apabila seseorang mengklik pada item menu, ia memaparkan submenu.
Masalah saya ialah apabila submenu sudah dibuka dan saya klik pada item menu lain, ia menunjukkan submenu baru tetapi tidak menyembunyikan menu sebelumnya yang dibuka.
Kemas kini: Saya menyunting soalan supaya ia hanya memfokuskan pada satu isu sekarang.
$(".menus_li").click(function(e) {
$(".blocks_ul", this).toggleClass('submenu-is-active');
});
a {
color: #fff;
text-decoration: none;
}
li {
list-style: none;
}
.top-menu {
z-index: 2;
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
width: 100%;
background: #0088ff;
padding: 1rem;
margin: 0;
}
.menus_li {
font-weight: bold;
margin-left: 1rem;
}
.blocks_ul {
display: none;
position: absolute;
background: #fff;
top: 100%;
min-width: 120px;
border-radius: 8px;
padding: 1rem;
}
.blocks_ul a {
color: #000;
}
.blocks_ul li {
padding-left: 10px;
font-weight: normal;
padding: 0.4rem 0.7rem;
}
.blocks_ul.submenu-is-active {
display: block;
}
.bg_submenu {
background-color: rgba(0, 0, 0, 0.6);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: none;
}
.bg_submenu.show {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg_submenu"></div>
<ul class="top-menu">
<li class="menus_li"><a href="#">Cars +</a>
<ul class="blocks_ul">
<li><a class="menu-link" href="#">Mercedes</a></li>
<li><a class="menu-link" href="#">Jeep</a></li>
<li><a class="menu-link" href="#">Ford</a></li>
<li><a class="menu-link" href="#">BMW</a></li>
<li><a class="menu-link" href="#">Tesla</a></li>
</ul>
</li>
<li class="menus_li"><a href="#">Computers +</a>
<ul class="blocks_ul">
<li><a class="menu-link" href="#">Apple</a></li>
<li><a class="menu-link" href="#">Lenovo</a></li>
<li><a class="menu-link" href="#">HP</a></li>
<li><a class="menu-link" href="#">Dell</a></li>
<li><a class="menu-link" href="#">Acer</a></li>
</ul>
</li>
</ul>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda boleh menukar kod seperti berikut (komen dalam kod)
const $blocks = $(".blocks_ul"); // get all blocks const $background = $(".bg_submenu"); // get background $(".menus_li").on('click', e => { const $thisBlock = $(".blocks_ul", e.currentTarget); // get current block $blocks.not($thisBlock).removeClass('submenu-is-active'); // remove class from other blocks $thisBlock.toggleClass('submenu-is-active'); // toggle the class on the current block $background.toggleClass('show', $thisBlock.hasClass('submenu-is-active')); // only show the background if you are showing the block }); $('body').on('click', e => { const $clicked = $(e.target); // get the target that was clicked // check if the click originated in the menu if (!$clicked.hasClass('menus_li') && !$clicked.closest('.menus_li').length) { // if not do the following $blocks.removeClass('submenu-is-active'); // hide menu $background.removeClass('show'); // hide background } })a { color: #fff; text-decoration: none; } li { list-style: none; } .top-menu { z-index: 2; position: fixed; top: 0; left: 0; width: 100%; display: flex; width: 100%; background: #0088ff; padding: 1rem; margin: 0; } .menus_li { font-weight: bold; margin-left: 1rem; } .blocks_ul { display: none; position: absolute; background: #fff; top: 100%; min-width: 120px; border-radius: 8px; padding: 1rem; } .blocks_ul a { color: #000; } .blocks_ul li { padding-left: 10px; font-weight: normal; padding: 0.4rem 0.7rem; } .blocks_ul.submenu-is-active { display: block; } .bg_submenu { background-color: rgba(0, 0, 0, 0.6); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; display: none; } .bg_submenu.show { display: block; }