JQuery -删除类处于非活动状态

qnakjoqk 于 2022-12-29 发布在 jQuery

关注(0)|答案(2)|浏览(151)

我有一个函数，通过使用JQuery向按钮添加css来移动按钮。

function btnToggle() {
  $('.btnClass').addClass('active');
  if ($('.btnClass').hasClass('active')) {
    $('.btnClass').css('margin-right', '250px');
  } else {
    $('.btnClass').removeClass('active');
  }
}

.btnClass {
  background: aqua;
  position: absolute;
  right: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnClass">button 1</button>

<button onclick="btnToggle()">slide</button>

但removeClass不起作用，按钮无法返回到原始位置

jquery

来源：https://stackoverflow.com/questions/74927569/jquery-removeclass-inactive

2条答案

按热度按时间

oxcyiej71#

您将无条件地添加类，因此if条件将始终为真。
不要在JavaScript中设置样式，而是在CSS中设置，然后使用toggleClass()。

function btnToggle() {
  $('.btnClass').toggleClass('active');
}

.btnClass {
  background: aqua;
  position: absolute;
  right: 2em;
}

.btnClass.active {
  margin-right: 250px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnClass">button 1</button>

<button onclick="btnToggle()">slide</button>

赞(0）回复(0）举报 2022-12-29

rks48beu2#

function btnToggle() {
  if ($('.btnClass').hasClass('active')) {
    $('.btnClass').removeClass('active');
  } else {
    $('.btnClass').addClass('active');
  }
}

.btnClass {
  background: aqua;
  position: absolute;
  right: 2em;
}

.active {
  margin-right: 250px
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="btnClass">button 1</button>

<button onclick="btnToggle()">slide</button>

赞(0）回复(0）举报 2022-12-29

我来回答

JQuery -删除类处于非活动状态

2条答案

相关问题

热门标签

最新问答