Question

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

我想设置＃menudd.show的max-height来满足我的过渡。我想在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";

此输出＆＃34; show未定义＆＃34;在控制台中。

如果我使用$（＆＃34;＃menudd.show＆＃34;）。get（0）.style.maxHeight它输出＆＃34;无法读取属性＆＃39; style＆＃39;未定义＆＃34;在控制台中。

如果我使用$（＆＃34;＃menudd.show＆＃34;）。style.maxHeight它输出＆＃34;无法读取属性＆＃39; maxHeight＆＃39;未定义＆＃34;在控制台中。

非常感谢任何帮助！祝你好运：）

Answer 1

在你的问题中，你说你想在div中寻找一个带有“show”类的元素。

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

$("#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;。此外，<br />代码后的</a>代码（不包括最后一个代码）。

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

记住这个：如果控制台说它是undefined，你可能要么搞砸了如何选择元素 OR 它认真对待它不存在是因为你拼错了一封信，或者说你忘了给一个给定的标签添加一个类（就像这个例子）。

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

$("#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中添加类。我不会完整地写它，因为有一个着名的问题，Peter Boughton已经在Stack Overflow上有一个虔诚的回答。阅读here。

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

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

注意空间非常重要。因为它是一个带有值的字符串，所以你需要把它放在一起，否则它会将所有的类视为一个不存在的单词（一个类）。

删除：

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

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

最后，这超出了问题的范围而只是提醒：我需要说明如果这是一个下拉菜单，则需要添加show类通过调用某种主菜单中的函数进行一些聚焦（或点击均匀）之后，而不是将其硬编码到<div>中，就像我所做的那样，以显示代码正常工作。例如，菜单中的“汽车品牌”项目将显示可用汽车品牌（ Ford ， Toyota 等）的下拉列表专注于它。

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

用特定的类改变div的风格？

2 个答案: