jqueryif条件CSS

我有以下代码： “滑动切换”功能工作正常，但背景色不变。 有什么建议吗？谢谢

jQuery：

$("#btnContactMob").on("click", function(){
  $("#contactMob").stop(true).slideToggle();
});

if (('#contactMob').is(':visible')) {
  $('#btnContactMob').css('background-color', '#FFF');
}

CSS:

---

您需要将条件检查移动到slideToggle回调

var $el = $('#contactMob');
var $btn = $("#btnContactMob").on("click", function () {
    $el.stop(true).slideToggle(function () {
        $btn.css('background-color', $el.is(':visible') ? '#FFF' : '');
    });
});

---

演示：

看起来您的if语句中遗漏了一个$，请尝试：

$("#btnContactMob").on("click", function(){
  $("#contactMob").stop(true).slideToggle();
});

if ($('#contactMob').is(':visible')) {
  $('#btnContactMob').css('background-color', '#FFF');
}

更新

---

也同意上面的答案，即每次单击时都应进行此检查。

看起来您缺少jquery

$

符号：

if ($('#contactMob').is(':visible')) {
    $('#btnContactMob').css('background-color', '#FFF');
}

---

如果需要在单击处理程序中移动整个

if

。

在

滑动切换

完成回调中移动您的条件；您的状况中缺少一个

$

代码：

---

演示：

我假设这段代码是在文档就绪时执行的？如果是这样，那么元素#contactMob在文档就绪时不可见，就是这样

因此，您应该在单击#btnContact mob后运行“如果可见”检查，以便在单击后进行检查。像这样：

$("#btnContactMob").on("click", function(){
  $("#contactMob").stop(true).slideToggle();

  if ($('#contactMob').is(':visible')) {
    $('#btnContactMob').css('background-color', '#FFF');
  }
});

这样，当点击#btncontact mob时，也会再次执行IF检查。更好的方法是，在“slideToggle”的完整函数中移动IF语句。这样，检查只在“滑动切换”完成后执行。因此，您始终可以确保它在正确的时刻检查可见性。像这样：

$("#btnContactMob").on("click", function(){
  $("#contactMob").stop(true).slideToggle(function() { 
    if ($('#contactMob').is(':visible')) {
      $('#btnContactMob').css('background-color', '#FFF');
    }
  });
});

---

尝试此操作，一旦元素再次隐藏，也应重置颜色：

$("#btnContactMob").on("click", function () {
    $("#contactMob").stop(true).slideToggle(function () {
        if ($('#contactMob').is(':visible')) {
            $('#btnContactMob').css('background-color', '#FFF');
        } else {
            $('#btnContactMob').css('background-color', '');
        }
    });
});

---

您的

if

声明不在您的活动中。谢谢您，尽管您尝试了Irvin Dominin aka Edward的答案，但问题仍然存在-这看起来应该可以解决您的问题！谢谢这正是我想要的

$("#btnContactMob").on("click", function(){
  $("#contactMob").stop(true).slideToggle(function() { 
    if ($('#contactMob').is(':visible')) {
      $('#btnContactMob').css('background-color', '#FFF');
    }
  });
});

$("#btnContactMob").on("click", function () {
    $("#contactMob").stop(true).slideToggle(function () {
        if ($('#contactMob').is(':visible')) {
            $('#btnContactMob').css('background-color', '#FFF');
        } else {
            $('#btnContactMob').css('background-color', '');
        }
    });
});