JQuery如果條件CSS

我有此代碼： 'slideToggle'函數它的工作很好，但背景顏色不會改變。任何提示？由於JQuery如果條件CSS

的jQuery：

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

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

CSS：

#btnContactMob { 
    cursor: pointer; 
    width: 100%; 
    height: 55px; 
    color: #333; 
    background-color: #CCCCCC; 
    border-top:1px solid #1a1a1a; 
    font-family: Lato-Regular; 
    text-align: center; 
    padding-top: 10px; 
    font-size: 26px; 
} 
    #contactMob { 
    width: 100%; 
    height:100%; 
    position: relative; 
    background-color: #FFF; 
    float: left; 
    display: none; 
    }

來源

2014-04-04 Miguel

你'if'說法是不是你的事件中。 –

您需要健康檢查移動到的slideToggle回調

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

演示：Fiddle

來源

2014-04-04 11:32:47

謝謝...這正是我想要的 – Miguel

看起來你錯過了你的if語句$，請嘗試：

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

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

更新

而且與上面的回答，你應該這樣做，每次被點擊時檢查同意。

來源

2014-04-04 11:32:48 nick

謝謝你，問題依然存在 – Miguel

你是否試過Irvin Dominin aka Edward的答案 - 這看起來應該能解決你的問題！ – nick

看起來像你缺少一個jQuery $符號：

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

而且整個if需要單擊處理程序內移動。

來源

2014-04-04 11:33:17 Starscream1984

移動條件在slideToggle完成回調;您在您的情況下缺少$。

代碼：

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

演示：http://jsfiddle.net/IrvinDominin/kLvnR/

來源

2014-04-04 11:34:30

我假定這段代碼是在文件準備執行？如果是這樣，元素#contactMob在文檔就緒時不可見，就是這樣。

因此，在單擊#btnContactMob後，您應該運行「如果可見」檢查，以便檢查在點擊後完成。像這樣：

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

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

這樣，當單擊#btnContactMob時，IF檢查也會再次執行。更好的方法是，在「slideToggle」的完整功能中移動IF語句。這樣，檢查僅在「slideToggle」完成後執行。所以你總是確定它在適當的時候檢查可見性。就像這樣：

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

來源

2014-04-04 11:39:16

試試這個，這應該也可以將彩色復位一旦你的元素被再次隱藏：

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

來源

2014-04-04 11:42:11 nick

JQuery如果條件CSS

回答

相關問題