Question

我是编程方面的新手，所以我正在尝试为我的大学应用程序确定以下情况。我基本上想遍历整个“导航”菜单，并添加另一个将应用我的CSS样式的类。 PS：它必须包含子菜单！

到目前为止，这是使用JQuery的结果，但是我认为有一种使用香草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();

发生点击事件时，请从不同级别向每个HTML元素添加类，

1 个答案: