關閉js覆蓋後，我的頁面內容被隱藏起來

-1

最初顯示我的所有頁面內容。當我點擊名爲'關於我們'的按鈕（在頁腳中）時，我的覆蓋頁將覆蓋頁面並顯示一些信息。當我完成閱讀並且在右角點擊'X'時，覆蓋圖會關閉（因爲它應該這樣做），但我留下了一個沒有內容的網頁。點擊「關於我們」按鈕之前的內容現在隱藏了。關閉js覆蓋後，我的頁面內容被隱藏起來

這是爲什麼？

我的HTML：

<footer> 
<a id="footer_" href="#" onclick="openNav()">&#9776; Over ons </a> 
</footer>

我的JS：

function openNav() { 
    document.getElementById("myNav").style.height = "100%"; 
} 

function closeNav() { 
    document.getElementById("myNav").style.height = "0%"; 
}

我的CSS：

.overlay { 
    height: 0%; 
    width: 100%; 
    position: fixed; 
    z-index: 1; 
    top: 0; 
    left: 0; 
    background-color: rgb(0,0,0); 
    background-color: rgba(0,0,0, 0.9); 
    overflow-y: hidden; 
    transition: 0.5s; 
} 

.overlay-content { 
    position: relative; 
    top: 25%; 
    width: 100%; 
    text-align: center; 
    margin-top: 30px; 
} 

.overlay a { 
    padding: 8px; 
    text-decoration: none; 
    font-size: 36px; 
    color: #818181; 
    display: block; 
    transition: 0.3s; 
} 

.overlay a:hover, .overlay a:focus { 
    color: #f1f1f1; 
} 

.overlay .closebtn { 
    position: absolute; 
    top: 20px; 
    right: 45px; 
    font-size: 60px; 
} 

@media screen and (max-height: 450px) { 
    .overlay {overflow-y: auto;} 
    .overlay a {font-size: 20px} 
    .overlay .closebtn { 
    font-size: 40px; 
    top: 15px; 
    right: 35px; 
    } 
}

頁面上的默認內容：

HTML：

<div id="content" > 

      <!-- Intro --> 
      <article id="menu_a"> 
       <h2>Introduction</h2> 
       <figure> 
        <img src="http://placehold.it/150x150" alt="Intro image"/> 
       </figure> 
       <p> 
       some text here bla bla bla.... 
       </p> 
      </article> 

</div>

的jsfiddle：https://jsfiddle.net/t60623gj/

來源

2016-11-27 user7186746

你可以分享一個小提琴顯示這個問題？ – abhishekkannojia

@abhishekkannojia請參閱編輯:) – user7186746

您的jsfiddle不會重現錯誤。 – starcorn

我會建議使用jQuery的工作，將使其更容易。

線沿線的東西：

$(document).ready(function() { 
    $('#footer').click(function() { 
    $('#myNav').slideUp(); 
}); 
    $('.closebtn').click(function() { 
    $('#myNav').slideDown(); 
}); 
});

取決於你希望你的資產淨值做什麼。

此外，您的小提琴似乎還存在問題 - 它只顯示您的頁腳。

編輯

或者，如果你要處理的元素的高度屬性可以使用.animate()

希望這有助於。

來源

2016-11-27 17:23:37

謝謝你的幫助:)我試過了，但它什麼也沒做。 – user7186746

關閉js覆蓋後，我的頁面內容被隱藏起來

回答

相關問題