我使用 CSS、HTML 和 jquery 建立了一個水平選單。當有人單擊選單項目時,它會顯示一個子選單。
我的問題是,當子選單已開啟並且我單擊另一個選單項目時,它會顯示新的子選單,但不會隱藏已開啟的上一個選單。
更新:我編輯了該問題,因此現在只關註一個問題。
$(".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>
您可以按以下方式更改程式碼(程式碼中的註解)
# ######吉普車#####- 福特
######寶馬#####
######特斯拉#####
-
######電腦 ###
######蘋果#####
- 聯想#
######生命值#####
- 戴爾#
- 宏碁#