After click if CSS value equals

Question

Don't know why it's not work.

when toggleClass is done,if CSS value equals do hide();

$(".rwd-sec").click(function() {
      $(".rwd-main").toggleClass("is-active");
      if ($(".rwd-main").css("right") == "-84%") {
        $(".rwd-main").hide();
      }
})

.rwd-main {
  right: -84%;
}

.rwd-main.is-active {
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rwd-main">
  <div class="rwd-sec"></div>
</div>

codepen

`$(".rwd-main").css("right")` return the value in px not in percentage — Tamil Selvan C, Jul 02 '20 at 14:44
@TamilSelvanC Is there a way return the value in percentage? that is very difficult for position menu, if return the value in px. — cat anny, Jul 02 '20 at 14:58
try this https://stackoverflow.com/questions/23462600/get-css-width-of-an-element-and-convert-it-to-percentage — Tamil Selvan C, Jul 02 '20 at 15:08
try `var element = $(this); $(".rwd-sec").css("left", "-12px"); $(".rwd-main").toggleClass("is-active"); var percent = parseFloat( element.css('width') )/parseFloat(element.parent().width())*100+'%'; alert(parseFloat(element.css('width'))) if ($(".rwd-main").css("right") == percent) { $(".rwd-main").hide(); }` — Tamil Selvan C, Jul 02 '20 at 15:15

score 0 · Answer 1 · answered Jul 02 '20 at 14:41

0

There are many ways for this, a more simple way would be to just check if the element has the class so you dont need to check for a specific css value (which might change later on):

$(".rwd-sec").click(function () {
  $(".rwd-main").toggleClass("is-active");
  if ($(".rwd-main").hasClass('is-active')) {
    $(".rwd-main").hide();
  }
}

answered Jul 02 '20 at 14:41

Alex

9,911
5
33
52

but I want if-statement after toggleClass finished , so I set CSS value equals. Hide rwd-main atfter removeclass. – cat anny Jul 02 '20 at 14:45
the if statement is after the toggle?! – Alex Jul 02 '20 at 14:46

score 0 · Answer 2 · answered Jul 02 '20 at 15:22

try

//to find the value of the css in percentage
var percent = parseFloat( element.css('width'))/parseFloat(element.parent().width())*100+'%';

Ref: get css width of an element and convert it to percentage

Note: parseFloat is used convert to float of return value (eg "47px")

$(".rwd-sec").click(function() {
     var element = $(this);

    $(".rwd-main").toggleClass("is-active");
    var percent = parseFloat( element.css('width'))/parseFloat(element.parent().width())*100+'%';
//alert(parseFloat(element.css('width')))
if ($(".rwd-main").css("right") == percent) {
  $(".rwd-main").hide();
}
})

.rwd-main {
  right: -84%;
}

.rwd-main.is-active {
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rwd-main">
  <div class="rwd-sec"></div>
</div>

score 0 · Answer 3 · answered Jul 02 '20 at 15:31

One of the other ways, in addition to @Alex's .hasClass(), is to use .is():

$(".rwd-sec").click(function() {
      $(".rwd-main").toggleClass("is-active");
      //console.log( $('.rwd-main').css('right') );
      if ($(".rwd-main").is(".is-active")) {
        $(".rwd-main").hide();
      }
})

.rwd-main {
  right: -84%;
}

.rwd-main.is-active {
  right: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="rwd-main">
  <div class="rwd-sec">X</div>
</div>

Reference

.is() | jQuery API Documentation

After click if CSS value equals

3 Answers3