VanillaJS多級導航在子級中不起作用-有解無憂

我創建了一個非常基本的 HTML 多導航，它從第一級開始作業。但它不適用于二級選單。例如。在我的選單“關于”頁面中有子選單，在關于選單的“個人資料”選單中有另一個子選單。但是當我點擊“個人資料”選單時，它不起作用。誰能幫我解決這個問題。提前致謝！

let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item)=>{
if(item.parentElement.querySelector("ul")) {
item.parentElement.classList.add("has-submenu");
}
});



let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item)=>{
item.addEventListener("click",(e)=>{
e.preventDefault();
let ul = e.target.parentElement.querySelector("ul");
let cs = window.getComputedStyle(ul).display;
if(cs==="block") {
ul.style.cssText="display:none";
}
else {
ul.style.cssText="display:block";
}

});

});

.main-navigation ul {list-style:none;margin:0;padding:0;font-family:arial;}
    .main-navigation ul li {padding:.35rem;background:#f9f9f9;}
    .main-navigation ul li ul {padding-left:1rem;display:none;}
    .main-navigation ul li a {display:block;text-decoration:none;}

<div class="main-navigation">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">About  </a>
    <ul>
      <li><a href="">Profile  </a>
      <ul>
       <li><a href="">History</a></li>
       <li><a href="">Management</a></li>
      </ul>
      </li>
      <li><a href="">Vision</a></li>
      <li><a href="">Mission</a></li>
    </ul>
    </li>
    <li><a href="">Services  </a>
    <ul>
      <li><a href="">Web Design</a></li>
      <li><a href="">Web Development</a></li>
    </ul>
    </li>
    <li><a href="">Contact</a></li>
</ul>   
</div>

uj5u.com熱心網友回復：

事情是一切都適用于您的代碼。但是當點擊一個.has-submenu本身在 a 內部.has-submenu的事件監聽器時，每個元素都會被觸發。我為事件添加了一個 topPropagation 以免冒泡，這將有效地防止在 parent 上觸發.has-submenu。

let menus = document.querySelectorAll(".main-navigation ul li a");
menus.forEach((item)=>{
if(item.parentElement.querySelector("ul")) {
item.parentElement.classList.add("has-submenu");
}
});



let submenu = document.querySelectorAll(".has-submenu");
submenu.forEach((item)=>{
item.addEventListener("click",(e)=>{
e.preventDefault();
e.stopImmediatePropagation(); // HERE
let ul = e.target.parentElement.querySelector("ul");
console.log(ul);
let cs = window.getComputedStyle(ul).display;
if(cs==="block") {
ul.style.cssText="display:none";
}
else {
ul.style.cssText="display:block";
}

});

});

.main-navigation ul {list-style:none;margin:0;padding:0;font-family:arial;}
    .main-navigation ul li {padding:.35rem;background:#f9f9f9;}
    .main-navigation ul li ul {padding-left:1rem;display:none;}
    .main-navigation ul li a {display:block;text-decoration:none;}

<div class="main-navigation">
<ul>
    <li><a href="">Home</a></li>
    <li><a href="">About  </a>
    <ul>
      <li><a href="">Profile  </a>
      <ul>
       <li><a href="">History</a></li>
       <li><a href="">Management</a></li>
      </ul>
      </li>
      <li><a href="">Vision</a></li>
      <li><a href="">Mission</a></li>
    </ul>
    </li>
    <li><a href="">Services  </a>
    <ul>
      <li><a href="">Web Design</a></li>
      <li><a href="">Web Development</a></li>
    </ul>
    </li>
    <li><a href="">Contact</a></li>
</ul>   
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/355151.html

標籤：javascript html css

上一篇：在html頁面之前加載JavaScript

下一篇：節點承諾屬性