javascript - Toggle inline CSS in jQuery - Stack Overflow

admin管理员组

文章数量:1389754

I want to toggle some inline CSS with a jQuery script, but I can't do it with a class, because I get the value of the padding-top dynamically, here is the function :

$('.button').click(function(){
  $(this).toggleClass('active');
});

var tagsHeight = $('span').outerHeight();

$(".button").click(function (){
  if ($(this).is('active')) {
    $(".change").css('padding-top', '0');
  }
  else if ($(this).not('active')) {
    $(".change").css('padding-top', tagsHeight);
  }
});

An a example here : /

I really don't get why this is not working correctly ...

Thanks !

I want to toggle some inline CSS with a jQuery script, but I can't do it with a class, because I get the value of the padding-top dynamically, here is the function :

$('.button').click(function(){
  $(this).toggleClass('active');
});

var tagsHeight = $('span').outerHeight();

$(".button").click(function (){
  if ($(this).is('active')) {
    $(".change").css('padding-top', '0');
  }
  else if ($(this).not('active')) {
    $(".change").css('padding-top', tagsHeight);
  }
});

An a example here : https://jsfiddle/o1pbwfuo/

I really don't get why this is not working correctly ...

Thanks !

• javascript
• jquery

Share Improve this question Follow asked Jul 26, 2017 at 12:43 ChaaampyChaaampy 26322 silver badges1010 bronze badges 4

• 2 This what you want ? jsfiddle/o1pbwfuo/3 – Carsten Løvbo Andersen Commented Jul 26, 2017 at 12:45
• not a good idea, better toggle class, – Álvaro Touzón Commented Jul 26, 2017 at 12:45
• @CarstenLøvboAndersen Løvbo Andersen thx mate :) – Chaaampy Commented Jul 26, 2017 at 12:51
• 1 @ÁlvaroTouzón I can't because the value will change with the size of the viewport – Chaaampy Commented Jul 26, 2017 at 12:52

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

The issue with your code is due to the incorrect selector in not(). That being said, you can improve your logic by bining the click() event handlers, then using a single ternary expression to set the padding-top on the required element based on the related class. Try this:

var tagsHeight = $('span').outerHeight();

$('.button').click(function() {
  var active = $(this).toggleClass('active').hasClass('active');
  $(".change").css('padding-top', !active ? '0' : tagsHeight);
});

Working example

You made a mistake while using .is and .not. You need to address the class itself inclusive the dot at beginning.

$('.button').click(function(){
  $(this).toggleClass('active');
});

var tagsHeight = $('span').outerHeight();

$(".button").click(function (){
  if ($(this).is('.active')) {
    $(".change").css('padding-top', '0');
  }
  else if ($(this).not('.active')) {
    $(".change").css('padding-top', tagsHeight);
  }
});

https://jsfiddle/06ek4fej/

---

By the way, the else-if request is nonsense. If = true or if = false. Else If results the same as else.

$(".button").click(function (){
  if ($(this).is('.active')) {
    $(".change").css('padding-top', '0');
  }
  else {
    $(".change").css('padding-top', tagsHeight);
  }
});

On click you can check whether element has active class or not and there is no need to add two click methods on '.button'.

var tagsHeight = $('span').outerHeight();

$(".button").click(function (){
  $(this).toggleClass('active');
  if ($(this).hasClass('active')) {
    $(".change").css('padding-top', '0');
  }
  else{
    $(".change").css('padding-top', tagsHeight);
  }
});

You can use Has class method for the check is active class exist or not.

$(".button").click(function (){
  if ($(this).hasClass('active')) {
    $(".change").css('padding-top', '0');
  }
  else{
    $(".change").css('padding-top', tagsHeight);
  }
});

本文标签： javascriptToggle inline CSS in jQueryStack Overflow