blocks|key|1827649|text|您需要将条件检查移到slideToggle回调。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1827650|var+$el+=+$('#contactMob');
var+$btn+=+$("#btnContactMob").on("click",+function+()+{
++++$el.stop(true).slideToggle(function+()+{
++++++++$btn.css('background-color',+$el.is(':visible')+?+'#FFF'+:+'');
++++});
});|code-block|syntax|javascript|1827651|演示：小提琴|offset|length|1827652|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/arunpjohny/94ZEh/^0|0|0|3|3|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

You need to move the condition check to the slideToggle callback

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

Demo: <a href="http://jsfiddle.net/arunpjohny/94ZEh/" rel="nofollow">Fiddle</a>

blocks|key|1107229|text|看起来您在if语句中漏掉了一个$，请尝试：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1107230|$("#btnContactMob").on("click",+function(){
++$("#contactMob").stop(true).slideToggle();
});

if+($('#contactMob').is(':visible'))+{
++$('#btnContactMob').css('background-color',+'#FFF');
}|code-block|syntax|javascript|1107231|更新|offset|length|style|BOLD|1107232|也同意上面的答案，你应该做这个检查，每次它被点击。|1107233|entityMap^0|0|0|0|2|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Looks like you missed a $ in your if statement, try : 

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

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

Update

Also agree with the above answer that you should do this check each time it is clicked.

blocks|key|1827664|text|看起来您缺少了jquery+$符号：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1827665|if+($('#contactMob').is(':visible'))+{
++++$('#btnContactMob').css('background-color',+'#FFF');
}|code-block|syntax|javascript|1827666|整个if需要在单击处理程序中移动。|1827667|entityMap^0|E|1|0|0|2|2|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|R|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|M|3|-4|5|6|7|V|8|@]|D|@]|E|$]]]|N|$]]

Looks like you're missing a jquery <code>$</code> symbol:

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

And the whole <code>if</code> needs moving inside the click handler.

blocks|key|2106067|text|在slideToggle完全回调中移动条件；在条件中缺少一个$。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2106068|代码：|2106069|$("#btnContactMob").on("click",+function+()+{
++++$("#contactMob").stop(true).slideToggle(function+()+{
++++++++if+($('#contactMob').is(':visible'))+{
++++++++++++$('#btnContactMob').css('background-color',+'#FFF');
++++++++};
++++});
});|code-block|syntax|javascript|2106070|演示：http://jsfiddle.net/IrvinDominin/kLvnR/|2106071|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/IrvinDominin/kLvnR/^0|1|B|U|1|0|0|0|3|13|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|13|8|@]|D|@$9|14|A|15|1|16]]|E|$]]|$1|O|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

Move you condition inside the <code>slideToggle</code> complete callback; you are missing a <code>$</code> in your condition.

Code:

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

Demo: <a href="http://jsfiddle.net/IrvinDominin/kLvnR/" rel="nofollow">http://jsfiddle.net/IrvinDominin/kLvnR/</a>

blocks|key|1107243|text|我假设这段代码是在文档准备好的时候执行的？如果是这样，元素#contactMob在文档就绪时是不可见的，仅此而已。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1107244|因此，您应该在单击#btnContactMob之后运行“如果可见”检查，以便在单击之后进行检查。就像这样：|1107245|$("#btnContactMob").on("click",+function(){
++$("#contactMob").stop(true).slideToggle();

++if+($('#contactMob').is(':visible'))+{
++++$('#btnContactMob').css('background-color',+'#FFF');
++}
});|code-block|syntax|javascript|1107246|这样，当单击#btnContactMob时，IF检查也会再次执行。一个更好的方法是，在"slideToggle“的完整函数中移动IF语句。这样，只有在完成"slideToggle“之后才执行检查。所以你总能确定它会在合适的时刻检查能见度。如下所示：|1107247|$("#btnContactMob").on("click",+function(){
++$("#contactMob").stop(true).slideToggle(function()+{+
++++if+($('#contactMob').is(':visible'))+{
++++++$('#btnContactMob').css('background-color',+'#FFF');
++++}
++});
});|1107248|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

I assume this code is being executed at document ready? If so, the element #contactMob isn't visible at document ready, and that's it. 

So you should run the "If visible" check, after you click the #btnContactMob so the check is being done after the click. Like so: 

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

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

This way, when the #btnContactMob is clicked, the IF check is also executed again. A better way would be, to move the IF statement in the complete function of the "slideToggle". That way, the check is only executed after the "slideToggle" is done. So you are always sure it checks for visibility at the right moment. Like this: 

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

blocks|key|2106093|text|试试这个，一旦你的元素再次被隐藏，这就应该重新设置颜色：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2106094|$("#btnContactMob").on("click",+function+()+{
++++$("#contactMob").stop(true).slideToggle(function+()+{
++++++++if+($('#contactMob').is(':visible'))+{
++++++++++++$('#btnContactMob').css('background-color',+'#FFF');
++++++++}+else+{
++++++++++++$('#btnContactMob').css('background-color',+'');
++++++++}
++++});
});|code-block|syntax|javascript|2106095|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Try this, this should reset the colour also once your element is hidden again :

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

I have This code:
The 'slideToggle' function it's working nice but the background color doesn't change.
Any tips? Thanks

jQuery:

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

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

CSS:

<pre><code>#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;
 }
</code></pre>

Jquery if Condition CSS

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有这样的代码：'slideToggle‘函数--它工作得很好，但是背景色没有变化。有小费吗？谢谢jQuery：$("#btnContactMob").on("click", function(){  $("#contactMob").stop(true).slideToggle();});if (('#contactMob').is(':visible')) {  $('#btnContactM

问Jquery如果条件CSS
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery如果条件CSSEN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery如果条件CSS
EN