点击后如果 CSS 值等于答案

【问题标题】：After click if CSS value equals点击后如果 CSS 值等于
【发布时间】：2020-07-02 23:31:37
【问题描述】：

不知道为什么它不起作用。

toggleClass 完成后，如果 CSS 值等于 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") 以 px 而非百分比返回值
@TamilSelvanC 有没有办法以百分比返回值？这对于位置菜单来说是非常困难的，如果返回 px 的值。
试试这个stackoverflow.com/questions/23462600/…
试试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(); }

标签： jquery css if-statement

【解决方案1】：

有很多方法可以做到这一点，更简单的方法是检查元素是否具有类，这样您就不需要检查特定的 css 值（稍后可能会更改）：

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

【讨论】：

但我想要在 toggleClass finished 之后使用 if 语句，所以我将 CSS 值设置为等于。在 removeclass 之后隐藏 rwd-main。
if 语句在切换之后？！

【解决方案2】：

试试

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

参考：get css width of an element and convert it to percentage

注意：parseFloat 用于转换为返回值的浮点数（例如“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>

【讨论】：

【解决方案3】：

除了@Alex 的.hasClass() 之外，另一种方法是使用.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>

参考

.is() | jQuery API Documentation

【讨论】：