切換沒有jQuery的父級元素onclick

我試圖在sub ul元素處於活動狀態時切換父li元素的類。我知道如何在jQuery中做到這一點，但這個項目的目標是不依賴於像Bootstrap或jQuery這樣的庫。切換沒有jQuery的父級元素onclick

我有CodePen演示：https://codepen.io/mikejandreau/pen/eRvOBQ

還有就是使用此相同的菜單開發站點：http://losaidos.com/dev/baseinstall/。

這是JavaScript目前控制子菜單切換：在獲得

this.parentElement.querySelector('.page_item_has_children a').classList.toggle("active");

但至今沒有運氣：

// Add toggles to menu items that have submenus and bind to click event 
var subMenuItems = document.body.querySelectorAll('.page_item_has_children > a'); 
var index = 0; 
for (index = 0; index < subMenuItems.length; index++) { 
    var dropdownArrow = document.createElement('span'); 
    dropdownArrow.className = 'sub-nav-toggle'; 
    dropdownArrow.innerHTML = 'More'; 
    subMenuItems[index].parentNode.insertBefore(dropdownArrow, subMenuItems[index].nextSibling); 
} 

// Enables toggling all submenus individually 
var subMenuToggle = document.querySelectorAll('.sub-nav-toggle');  
for(var i in subMenuToggle) { 
    if(subMenuToggle.hasOwnProperty(i)) { 
    subMenuToggle[i].onclick = function() { 
     this.parentElement.querySelector('.children').classList.toggle("active"); 
     this.parentElement.querySelector('.sub-nav-toggle').classList.toggle("active"); 
    }; 
    } 
}

我試圖通過將此到subMenuToggle[i].onclick功能重複的邏輯它工作。我感覺我很接近但錯過了一些明顯的東西。

任何指針將不勝感激 - 在此先感謝！

來源

2017-06-17 Mike Jandreau

不要在節點列表中使用'for ... in'。使用'for（var i = 0; i Phil

我用您的建議更新了我的CodePen演示，並且似乎沒有招。我可能做錯了 - 這裏是更新後的演示：https://codepen.io/mikejandreau/pen/eRvOBQ?editors=0010。 –

答案正盯着我。

因爲目標元素已經在父代中，所以沒有必要使用.querySelector('.class-of-parent)。我加了this.parentElement.classList.toggle("active");，它像一個魅力。

// Enables toggling all submenus individually 
var subMenuToggle = document.querySelectorAll('.sub-nav-toggle'); 
for(var i in subMenuToggle) { 
    if(subMenuToggle.hasOwnProperty(i)) { 
    subMenuToggle[i].onclick = function() { 
     this.parentElement.querySelector('.children').classList.toggle("active"); 
     this.parentElement.querySelector('.sub-nav-toggle').classList.toggle("active"); 
     this.parentElement.classList.toggle("active"); // facepalm of obviousness 
    }; 
    } 
}

來源

2017-06-20 19:22:25

切換沒有jQuery的父級元素onclick

回答

相關問題