jQuery - .css() 不工作？

Question

Exclaimer，这主要是 sn-p 代码，因为我不知道如何解释这一点。请不要讨厌：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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">press me</button>
<div id="dd">
  <a href="#">press me 1</a>
  <a href="#">press me 2</a>
  <a href="#">press me 3</a>
  <a href="#">press me 4</a>
</div>

这就是它应该的样子。我唯一改变的是删除 .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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">press me</button>
<div id="dd">
  <a href="#">press me 1</a>
  <a href="#">press me 2</a>
  <a href="#">press me 3</a>
  <a href="#">press me 4</a>
</div>

Answer 1

jQuery 工作正常，你的问题出在：$("#dd.show")。在您执行该代码时，选择器#dd.show 将找不到任何东西，因为不存在这样的元素。 （您只需在单击按钮时添加 show 类）

您必须在按下按钮时添加该 css。另请注意，$.css 添加了内联 css。 （如<div style="max-height:100px;"></div>）

Answer 2

在该行执行时：

$("#dd.show").css("max-height", item[0].offsetHeight * item.length + "px")

您不知道 ID 为 dd 的 div 也有 show 类。由于show 类是动态切换的，我猜这个元素

<div id="dd">...</div>

在您的 jquery 代码运行时没有显示类。这意味着 $("#dd.show") 没有返回任何解释为什么你的 css 方法不起作用的东西。

如果可能的话，这正是你应该使用纯 css 的东西。如果您可以通过简单地指定来获得您想要的行为

#dd.show {
    max-height: 225px;
}

那我就这么做了。

如果您想测试一下我是否正确，请在尝试使用 jQuery 设置 max-height 属性之前添加以下行。

console.log($("#dd").hasClass('show'));

Answer 3

我找到了滑动问题的解决方案。我添加了一个 IF 语句来检查“show”类是否处于活动状态。如果是，则切换它并将“最大高度”设置为 0px。如果不是，则切换它并将“最大高度”设置为另一个长值:) 感谢所有帮助人员。你帮助我冲向终点线 :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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="btn">press me</button>
<div id="dd">
  <a href="#">press me 1</a>
  <a href="#">press me 2</a>
  <a href="#">press me 3</a>
  <a href="#">press me 4</a>
</div>