Javascript 多元素上的Jquery切换类

因此，我尝试创建一个标题导航栏，当鼠标悬停在上面时，它会增长，当光标离开该区域时，它会自动隐藏

我希望它在盘旋时，能长得更高。我通过尝试切换类

isShown

为此，我将使用一个修饰符类，将高度从0.2米增加到2米。 此外，由于隐藏时条形图非常小，我有另一个元素invisible div，它将两倍于其高度的元素包裹起来，以便在标题附近拾取悬停光标

以下是css类：

.hover_box{
  display:block;
  position:absolute;

  top:0;

  height:4em;
  width:100%;
}

header{
  display:block;
  position:absolute;

  top:0;
  height:0.2em;
  width:100%;

  background-color:#FFBB00;
}

header.isShown{
  height:2em;
}

我看不出这些类有什么错，但我认为错在我编写的处理“mouseover”事件的Jquery中

以下是我用于事件处理的代码：

$("header, .hover_box").mouseover(function(e){
    console.log("hovered over header")
    let elem = document.getElementsByTagName("header")[0];
    console.log("${e.target.tagName} targeted")
    elem.toggleClass("isShown");
  } 
);

---

您有

elem.toggleClass（“isShown”）

但通过

getElementsByTagName（）

调用定义了

elem

。是一个jQuery方法。是本机方法，不返回jQuery对象，但获取本机DOM元素。所以

elem

不是jQuery对象。这应该会在javascript控制台上给出一个关于

toggleClass（）

不是函数的错误

要解决此问题，请使

elem

成为jQuery对象

let elem = jQuery("header");
elem.toggleClass("isShown")

或者使用本机调用

---

是的，我现在明白我的错误了，但我只是犯了这个错误，出于某种原因，它对我没有帮助，我可能还有别的事情要做。如果包含的内容太多，您是否介意检查我是否运行了此代码？仅通过检查控制台，我似乎无法使事件运行fire@Leviathan_the_Great你的代码笔不工作，因为你的代码中有语法错误，而且你也没有包括解释它的jQuery库！，由于babel，我没有看到任何语法错误，但我完全没有注意到我将Jquery从项目中删除了。非常感谢！嗯，我设法解决了Jquery问题，但巴贝尔似乎没有给我任何错误。虽然我的代码仍然没有运行。这件事把我弄弯了腰。虽然我现在可以自己诊断。谢谢

elem.classList.toggle("isShown");