javascript - jQuery - .css() not working? - Stack Overflow

admin管理员组

文章数量:1324843

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

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=".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>

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

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./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>

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./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>

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Nov 11, 2017 at 4:15 Shiladitya 12.2k1717 gold badges2828 silver badges4242 bronze badges asked Nov 10, 2017 at 23:36 Lukas KnudsenLukas Knudsen 34922 gold badges55 silver badges1717 bronze badges 3

• 2 Have you done any debugging work (like adding console.log() calls) to see what item[0].offsetHeight and item.length are? The element does get a max-height value set. Also using a mix of jQuery and DOM APIs is kind-of confusing and error-prone. – Pointy Commented Nov 10, 2017 at 23:41
• You are dynamically adding the "show" class when the button is clicked. But you are trying to add styling to the "show" class at some other point (and at that point the "show" class doesn't exist). Change/add the css within the click event. – Kurt Commented Nov 10, 2017 at 23:45
• The thing is, even if i write "100px" instead of "item[0].offsetHeight * item.length + 'px' ", it still gives the same result. No max-height. – Lukas Knudsen Commented Nov 10, 2017 at 23:47

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

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)

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>)

at the time that this line executes:

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

you don't know for a fact that the div with id dd also has the show class. Since the show class is dynamically toggled, I'm guessing that this element

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

doesn't have the show class when your jquery code is running. That means that $("#dd.show") isn't returning anything which explains why your css method isn't working.

This is precisely the kind of thing that you should use plain css for if possible. If you can get the behavior you want by simply specifying

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

then I'd just do that.

If you want to test this to see if I'm right, then add the following line right before you try to set the max-height property with jQuery.

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

I found a solution to the sliding problem. I added an IF statement to check if the "show" class is active. If it is then toggle it and set "max-height" to 0px. If no, then toggle it and set "max-height" to the other long value :) Thanks for all the help guys. You helped me towards the finishline :3

Here is the final code for people that might e in later to see the solution :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./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>

本文标签： javascriptjQuerycss() not workingStack Overflow