如果jQuery中不顯示任何元素，則更改另一個元素的可見性

Question

如果特定元素具有display:none，我需要更改另一個元素的顯示屬性。

if ($("#first-layer").css('display') === 'none') { 
 
    $("#second-layer").removeAttr("visibility"); 
 
}

#second-layer { 
 
    color: black; 
 
    background-color: red; 
 
    width: 200px; 
 
    height: 150px; 
 
    background: yellow; 
 
    position: fixed; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    margin: auto; 
 
    visibility: hidden; // here I have to change by jQuery 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<header> 
 
    <div id="first-layer"> 
 
    <div id="header-elements"> 
 
     <div id="img-rain" class="animated fadeIn" class="img"><img src="img/img.png"> </div> 
 
     <div id="typed-strings" class="text"> 
 
     <span class="animated fadeInUp" id="typed"></span> 
 
     <br/> 
 
     <span class="description animated fadeIn">Your weather in one place</span> 
 
     </div> 
 
    </div> 
 
    <div id="typed-strings"> 
 
    </div> 
 
    <div class="start"> 
 
     <button type="button" class="btn btn-primary btn-lg responsive-width button-      bg-clr animated fadeIn">Get Started</button> 
 
    </div> 
 
    </div> 
 
    <div id="second-layer">123</div> 
 

 
</header>

我試圖從互聯網解決方案，但他們沒有工作。

Answer 1

你的代碼目前沒有做任何事情，但你可能有

if ($("#first-layer").not(":visible")) { // or .is(":hidden") 
    $("#second-layer").show(); 
} 

或

$("#second-layer").css({visibility:visible}); 

一個更簡單的時間，因爲CSS聲明是不是屬性

更多檢測這裏 Difference between :hidden and :not(:visible) in jQuery

Answer 2

使用jQuery(":hidden")

// if selector is none then 
if($('#first-layer').is(":hidden")){ 

    // alter second-layers visibility 
    $('#second-layer').css('visibility', 'visible'); 
}