使用if-else更改display：none with jquery

I've two divs: the div "#Stage" is display="block" and from time to time "display:none". Depending on this I'll appear my second div "#case", default is display="none".

我有两个div:div“#Stage”是display =“block”,并且不时“display:none”。根据这个,我将出现我的第二个div“#case”,默认是display =“none”。

So I tried these two ways:

所以我尝试了这两种方式:

if ($('#Stage').css('display') == 'none') {
    $('#case').css('display','block')
} // added display:none; to my css file at #case

if ($('#Stage').css('display') == 'none'){
    $('#case').show()
} else if ($('#Stage').css('display') != 'none'){
    $('#case').hide()
}

But both of these methods doesn't work, means the #case div is always on display:none. Does anyone know how to solve it?

但这两种方法都不起作用,意味着#case div始终显示:none。有谁知道如何解决它?

THanks

3 个解决方案

#1

I would use :visible to check if the element is shown or not and use show() and hide() method.

我会使用:visible来检查元素是否显示,并使用show()和hide()方法。

if ($('#Stage').is(':visible'))    
    $('#case').show();    
else
    $('#case').hide();

if ($('#Stage:visible').length)    
    $('#case').show();    
else
    $('#case').hide();

#2

It could possibly because you're using display:none in the CSS file, and it's taking precedence. Try doing it inline on #case and seeing if that works.

这可能是因为你在CSS文件中使用display:none,并且它优先。尝试在#case上内联,看看是否有效。

#3

Thanks for your help. My two solutions and the first from Adil was working. It was an ordering conflict with Adobe Edge - edgeActions.js.

谢谢你的帮助。我的两个解决方案和Adil的第一个解决方案正在发挥作这是与Adobe Edge - edgeActions.js的排序冲突。

#1