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屋!