改变具体类的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，它会输出“无法在控制台中读取'undefined'属性'风格'。

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

任何帮助，高度赞赏！祝你有美好的一天。 :)

Answer 1

在你的问题中，你说你想在div中寻找class“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 - 除了由onclick事件是更好的使用jQuery使用方法：

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

 
\t 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已经在堆栈溢出了。请阅读here。

总之，要加个班，只需拨打：

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

要注意空间这是非常重要的。由于它是一个带有值的字符串，因此您需要将其放入，否则它会将所有类视为一个不存在的单词（一个类）。

要删除：

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

可用说明通过彼得的回答。所以在那里阅读（重要）！

最后，这是出了问题的范围，仅仅是一个提醒：我需要指出，如果这是一个下拉菜单，你将需要经过一些重点添加show类（或单击偶数）通过在某种主菜单中调用一个函数，而不是像编写代码一样将代码硬编码到<div>中。例如，一个菜单的“汽车品牌”将关注它后，可用汽车品牌（福特,丰田等）的下拉菜单。

所以，明智的做法是在接收目标下拉打开的ID的函数来改变它。不要忘记在失去焦点（或其他）后关闭它。