jQuery – .css（）不工作？
Exclaimer，这主要是片段代码，因为我不知道怎么解释这个。 请不要讨厌：3
jQuery代码应该为“#dd.show”设置“max-height”属性。 那么有人可以告诉我为什么这不起作用：
$("#btn").on("click", function() { $("#dd").toggleClass("show"); }); var dv = document.getElementById("dd"); var item = dv.getElementsByTagName("A"); $("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px"); body { margin: 10px; } #btn { background-color: red; color: black; border: none; outline: none; width: 100px; height: 100px; font-size: 20px; -webkit-transition: all .4s ease; transition: all .4s ease; } #btn:hover { background-color: black; color: white; border-radius: 52.5px; } #dd { opacity: 0; max-height: 0; width: 200px; position: relative; overflow: hidden; -webkit-transition: all 1s ease; transition: all 1s ease; } #dd.show { opacity: 1; } #dd.show:hover { border-radius: 15px; } #dd a { background-color: red; color: black; padding: 16px 16px; text-align: center; text-decoration: none; display: block; font-size: 20px; -webkit-transition: all .4s ease; transition: all .4s ease; } #dd a:hover { background-color: black; color: white; }
这就是它应该是这样的。 我唯一改变的是移除.css JQuery并手动添加“max-height”：
$("#btn").on("click", function() { $("#dd").toggleClass("show"); });
body { margin: 10px; } #btn { background-color: red; color: black; border: none; outline: none; width: 100px; height: 100px; font-size: 20px; -webkit-transition: all .4s ease; transition: all .4s ease; } #btn:hover { background-color: black; color: white; border-radius: 52.5px; } #dd { opacity: 0; max-height: 0; width: 200px; position: relative; overflow: hidden; top: 10px; -webkit-transition: all 1s ease; transition: all 1s ease; } #dd.show { opacity: 1; max-height: 225px; } #dd.show:hover { border-radius: 37.5px; } #dd a { background-color: red; color: black; padding: 16px 16px; text-align: center; text-decoration: none; display: block; font-size: 20px; -webkit-transition: all .4s ease; transition: all .4s ease; } #dd a:hover { background-color: black; color: white; }
jQuery工作正常，你的问题在于： $("#dd.show") 。 在执行该代码时，选择器#dd.show将找不到任何内容，因为不存在这样的元素。 （您只需在按钮点击时添加show class）
按下按钮时，您必须添加该css。 另请注意， $.css会添加内联css。 （比如
）
在此行执行时：
$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px")
你不知道id为dd的div也有show class这个事实。 由于show类是动态切换的，我猜这个元素
...
当你的jquery代码运行时没有show类。 这意味着$("#dd.show")没有返回任何解释为什么你的css方法不起作用的东西。
如果可能的话，这正是你应该使用普通css的那种东西。 如果您只需指定即可获得所需的行为
#dd.show { max-height: 225px; }
然后我就这样做了。
如果你想测试它以查看我是否正确，那么在尝试使用jQuery设置max-height属性之前添加以下行。
console.log($("#dd").hasClass('show'));
我找到了滑动问题的解决方案。 我添加了一个IF语句来检查“show”类是否处于活动状态。 如果是，则将其切换并将“max-height”设置为0px。 如果不是，那么切换它并将“max-height”设置为另一个长值:)感谢所有帮助人员。 你帮助我走向终点线：3
以下是人们可能会在稍后看到解决方案的最终代码：3
$("#btn").on("click", function() { if(!$("#dd").hasClass("show")) { $("#dd").toggleClass("show"); $("#dd.show").css("max-height", document.getElementById("dd").getElementsByTagName("A")[0].offsetHeight * document.getElementById("dd").getElementsByTagName("A").length + "px"); } else { $("#dd").toggleClass("show"); $("#dd").css("max-height", "0px"); } });
body { margin: 10px; } #btn { background-color: red; color: black; border: none; outline: none; width: 100px; height: 100px; font-size: 20px; -webkit-transition: all .4s ease; transition: all .4s ease; } #btn:hover { background-color: black; color: white; border-radius: 52.5px; } #dd { opacity: 0; max-height: 0; width: 200px; position: relative; overflow: hidden; -webkit-transition: all 1s ease; transition: all 1s ease; } #dd.show { opacity: 1; } #dd.show:hover { border-radius: 15px; } #dd a { background-color: red; color: black; padding: 16px 16px; text-align: center; text-decoration: none; display: block; font-size: 20px; -webkit-transition: all .4s ease; transition: all .4s ease; } #dd a:hover { background-color: black; color: white; }