jQuery-.css()无法正常工作? [英] jQuery - .css() not working?

问题描述

惊叹号，这主要是代码段代码，因为我不知道该怎么解释.请不要讨厌:3

Exclaimer, this is mostly snippet code, cause I didn't know how else to explain this. Please don't hate :3

jQuery代码应该为#dd.show"设置"max-height"属性.有人可以告诉我为什么这不起作用:

The jQuery code is supposed to set the "max-height" property for "#dd.show". So can someone tell me why this doesn't work:

$("#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":

This is how it's supposed to look like. The only thing i changed was removing the .css JQuery and added "max-height" manually:

$("#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>

推荐答案

jQuery正常工作，您的问题就在这里:$("#dd.show").在执行该代码时，选择器#dd.show将找不到任何内容，因为不存在类似的元素. (您只需在按钮点击时添加show类)

jQuery works fine, you problem lies here: $("#dd.show"). At the point where you execute that code the selector #dd.show won't find anything as there exists no element like that. (You only add the show class on button click)

按下按钮时，您将不得不添加该CSS.另请注意，$.css添加了嵌入式css. (如<div style="max-height:100px;"></div>)

You will have to add that css when pressing the button. Also note that $.css adds in-line css. (like <div style="max-height:100px;"></div>)

这篇关于jQuery-.css()无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！