在單擊事件上，從不同級別向每個 HTML 元素添加 Class，

Question

我是編程新手，所以我想弄清楚我的大學應用程序的以下情況。 我基本上想遍歷整個導航菜單並添加另一個類來應用我的 CSS 樣式。 PS：它必須包括子菜單！

這是到目前為止使用 JQuery 的方法，但我認為使用 vanilla Javascript 有更好的方法來做到這一點。

$(document).ready(function () {
var speed = 200;
$(".sidebar-menu > li.have-children > a").click(function(e){
  e.preventDefault();
  if ( ! $(this).parent().hasClass("active") ){
    $(".sidebar-menu li ul").slideUp(speed);
    $(this).next().slideToggle(speed);
    $(".sidebar-menu li").removeClass("active");
    $(this).parent().addClass("active");
  } else {
    $(this).next().slideToggle(speed);
    $(".sidebar-menu li").removeClass("active");
  }
}); });

// ADD CLASS="SELECTED" TO "A" HTML ELEMENT IN "parent-menu" LINK
$(document).ready(function() {
$(".parent-menu").click(function () {
  $(this).addClass("selected");
  $(".parent-menu").not(this).removeClass("selected");
}); });

// ADD CLASS="SELECTED" TO "A" HTML ELEMENT IN "children-menu" LINK
$(document).ready(function() {
$(".children-menu").click(function () {
  $(this).addClass("selected");
  $(".children-menu").not(this).removeClass("selected");
}); });

這里有一個例子： https : //jsfiddle.net/clovisrosa/gw3myLfs/1/

菜單的最初想法來自“VSCode Docs”網站。 https://code.visualstudio.com/docs

如您所見，單擊時應用了不同的樣式。 但我想加載已選擇“主頁”按鈕的頁面，並在單擊時移動它。 此外，代碼似乎有點笨拙，哈哈！！

Answer 1

你有很多選擇。 這是其中的兩個。

1) 手動將其添加到 HTML 中：

<li id="home" class="parent-menu selected"><a href="#home">HOME</a></li>

2）使用jQuery模擬點擊：

$("#home").click();