使用特定类更改 div 的样式？

Question

如果这是一个重复的问题，我真的很抱歉。

我想设置 #menudd.show 的最大高度来满足我的过渡。我想在 javascript 中执行此操作，以便更精确地指定值。

这是我得到的，但由于某种原因它无法正常工作......

HTML：

<div id="menudd">
    <a href="index.html">Home</a>
    <a href="aboutme.html">About Me</a>
    <a href="shotterm.html">Short-Term</a>
    <a href="middleterm.html">Middle-Term</a>
    <a href="longterm.html">Long-Term</a>
</div>

CSS：

#menudd {
    position: fixed;
    overflow: hidden;
    max-height: 0px;
    opacity: 0;
    width: 200px;
    border-radius: 10px;
    box-shadow: 0 0 35px 15px black;
    transition: all 1s ease;
}

#menudd.show {
    opacity: 1;
}

JavaScript：

$("#menudd." + show).get(0).style.maxHeight = document.getElementById("menudd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("menudd").getElementsByTagName("A").length + "px";

这会在控制台中输出“显示未定义”。

如果我使用 $("#menudd.show").get(0).style.maxHeight 它会在控制台中输出“无法读取未定义的属性 'style'”。

如果我使用 $("#menudd.show").style.maxHeight 它会在控制台中输出“无法读取未定义的属性 'maxHeight'”。

非常感谢任何帮助！祝你有美好的一天。 :)

Answer 1

在您的问题中，您说您想在 div 中查找具有“显示”类的元素。

您当前正在寻找一个变量，而不是一个类。改变这个：

$("#menudd." + show)

到这里：

$("#menudd.show")

要设置最大高度，请将其更改为：

$( "#menuadd.show" ).css( { "maxHeight": document.getElementById("menudd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("menudd").getElementsByTagName("A").length + "px" } );

Answer 2

首先，我将添加一些内容以提高可读性 - 例如在下拉菜单中添加 padding: 0.5em;。另外，</a> 标签后面的<br /> 标签（不包括最后一个）。

第二，出现错误是因为页面中没有show类的元素。我将它添加到下拉列表的 <div> 以显示它正常工作并使错误消失。

记住这一点：如果控制台显示它是undefined，则很可能是您在选择元素时搞砸了或它真的没有存在是因为您拼错了一个字母，或者假设您忘记将一个类添加到给定的标签（如本例中）。

第三，您的工作状态代码如下所示。它不是使用 jQuery 缓动的东西，而是纯 JavaScript - 除了 onclick 事件，它更适合与 jQuery 一起使用：

$("#menu-dropdown").on("click", function() { 
	
  var menu_dropdown = document.getElementById("menudd");
	var menu_item = menu_dropdown.getElementsByTagName("A");
 
  $("#menudd").toggleClass("show");

	menu_dropdown.style.maxHeight = menu_item[0].offsetHeight * menu_item.length + "px";
  
  } ); 

#menudd {
  padding: 0.5em;
  position: fixed;
  overflow: hidden;
  max-height: 0px;
  opacity: 0;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 0 35px 15px black;
  transition: all 1s ease;
}

#menudd.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<span id="menu-dropdown">DropDown</span>
<div id="menudd">
  <a href="index.html">Home</a><br />
  <a href="aboutme.html">About Me</a><br />
  <a href="shotterm.html">Short-Term</a><br />
  <a href="middleterm.html">Middle-Term</a><br />
  <a href="longterm.html">Long-Term</a><br />
</div>

您也可以在我录制的 this video (Youtube) 上查看它。

第四，您可以使用纯 JavaScript 轻松添加类。我不会完整地写它，因为在 Stack Overflow 上已经有一个著名的问题，Peter Boughton 给出了虔诚的回答。阅读here。

无论如何，要添加一个类，只需调用：

document.getElementById("MyElementID").className += " MyClass";

注意空格很重要。由于它是一个带值的字符串，所以你需要把它放进去，否则它会将所有的类视为一个不存在的单词（一个类）。

删除：

document.getElementById("MyElementID").className = document.getElementById("MyElementID").className.replace( /(?:^|\s)MyClass(?!\S)/g , '' );

可以通过彼得的回答获得解释。所以请在那里阅读（重要）！

最后，这超出了问题的范围，只是一个提醒：我需要说明，如果这是一个下拉菜单，你需要在一些之后添加 show 类通过调用某种主菜单中的函数而不是像我为显示代码工作所做的那样将其硬编码到<div> 中来聚焦（或单击甚至）。例如，菜单的“汽车品牌”项将在下拉列表中显示可用的汽车品牌（福特、丰田等）专注于它。

因此，明智的做法是将其转换为接收要打开的目标下拉列表 ID 的函数。并且不要忘记在失去焦点（或其他）后关闭它。