離頁滑動面板樣式不按預期工作

所以我想創建一個外部菜單面板，打開時，我點擊一個按鈕，並獲得關閉時，我再次點擊。離頁滑動面板樣式不按預期工作

外部面板工作正常，但我的CSS不工作了。

$(document).ready(function() { 
 

 
    var window_height = $(window).height(); 
 
    var window_width = $(window).width(); 
 

 
    $('#panel').css('height', window_height - 20); 
 
    $('#wrapper').css('height', window_height - 25).css('width', window_width - 20); 
 
    $('#button').click(function() { 
 
    var value = $('#button').text(); 
 

 
    if (value == 'Menu') { 
 
     $('#wrapper').animate({ 
 
     left: 320 
 
     }); 
 
     $('#button').text('Close'); 
 
    } else { 
 

 
     $('#wrapper').animate({ 
 
     left: 0 
 
     }); 
 
     $('#button').text('Menu'); 
 
    } 
 
    }); 
 
});

body { 
 
    background: #000; 
 
    font-family: Arial; 
 
    color: #FFF; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    overflow: hidden; 
 
} 
 
#panel { 
 
    background: linear-gradient(to bottom, rgba(39, 40, 43, 1) 0%, rgba(0, 0, 0, 1) 100%); 
 
    max-width: 300px; 
 
    width: 100%; 
 
    color: #000; 
 
    /*border-right: 2px solid #800000;*/ 
 
    margin-top: -5px; 
 
} 
 
#panel img { 
 
    max-width: 250px; 
 
    width: 200px; 
 
    height: 200px; 
 
    margin: 0 auto; 
 
    padding-top: 10px; 
 
    display: block; 
 
} 
 
#panel ul { 
 
    list-style-type: none; 
 
} 
 
#panel ul li { 
 
    text-align: center; 
 
    border-bottom: 2px solid #800000; 
 
    margin-left: -35px; 
 
    margin-top: 10px; 
 
    margin-bottom: 5px; 
 
    width: 100%; 
 
    padding: 12px; 
 
    cursor: pointer; 
 
} 
 
#panel ul li a { 
 
    text-decoration: none; 
 
    font-size: 1.2em; 
 
    color: #FFF; 
 
    word-spacing: 2px; 
 
    text-align: center; 
 
} 
 
#panel ul li a:hover { 
 
    color: #02832d; 
 
} 
 
#wrapper { 
 
    background: #000; 
 
    max-width: 1200px; 
 
    width: 100%; 
 
    margin: 0 auto; 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 
#button { 
 
    background: #800000; 
 
    color: #FFF; 
 
    padding: 10px; 
 
    position: absolute; 
 
    bottom: 25px; 
 
    left: 10px; 
 
    border: none; 
 
    border-radius: 3px; 
 
} 
 
#head { 
 
    max-width: 1200px !important; 
 
    width: 100%; 
 
    height: auto; 
 
    margin: 0 auto; 
 
} 
 
#head img { 
 
    max-width: 50px; 
 
    width: 100%; 
 
    height: 50px; 
 
    margin-right: 20px; 
 
    vertical-align: middle; 
 
} 
 
#head a { 
 
    text-decoration: none; 
 
    color: #FFF; 
 
} 
 
#head a:hover { 
 
    color: #02832d; 
 
}

<!DOCTYPE html> 
 
<html lang="en"> 
 

 
    <head> 
 
    <script src="https://code.jquery.com/jquery-1.11.3.js"></script> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <link rel="stylesheet" href="css/normalize.css" /> 
 
    <link rel="stylesheet" href="css/style.css" /> 
 
    <script src="js/jquery.js"></script> 
 
    </head> 
 

 
    <body> 
 

 
    <div id="panel"> 
 
     <img src="example.png" /> 
 
     <nav> 
 
     <ul> 
 
      <li> 
 
      <a href="#"></a> 
 
      </li> 
 
      <li> 
 
      <a href="#"></a> 
 
      </li> 
 
      <li> 
 
      <a href="#"></a> 
 
      </li> 
 
      <li> 
 
      <a href="#"></a> 
 
      </li> 
 
      <li> 
 
      <a href="#"></a> 
 
      </li> 
 

 
     </ul> 
 
     </nav> 
 
    </div> 
 

 

 
    <div id="wrapper"> 
 

 
     <header id="head"> 
 
     <img src="anything.png" /> 
 
     <a href="#"></a> 
 
     <a href="#"></a> 
 

 
     </header> 
 

 
    </div> 
 

 
    <button id="button">Menu</button> 
 

 
    <script src="js/externalPanel.js"></script> 
 

 
    </body> 
 

 
</html>

因此，正如我說，外部面板外我的風格我的CSS不會改變它的一切。例如，當我調整我的瀏覽器的最大寬度dosen't工作，我不知道爲什麼...

希望有人能幫助我。

在此先感謝:)

來源

2015-12-07 RedFire

您能否請詳細解釋一下？哪些元素是最大寬度無法工作？你沒有看到什麼樣的預期結果？ –

當我嘗試調整我的瀏覽器在我的包裝或標題上的最大寬度不起作用。它調整大小，但只有當我刷新頁面，它會改變我的寬度，否則圖像或文字根本不會移動。例如，我在瀏覽器窗口的右側放置了一個圖像和文本，我的瀏覽器窗口在1200px，當我將其調整到800px時，圖像或文本不會隨瀏覽器一起移動，所以根本沒有響應。 – RedFire

您正在使用JavaScript修改包裝器的寬度。我可能會誤解，但我認爲你的解決方案是在窗口重新調整大小時繼續使用JavaScript來更新包裝器。 $（window）.resize（function（）{ //修改包裝器的寬度。 }）; –

試試看看這個代碼。我認爲這將解決您遇到的問題：

$(window).resize(function() { 
     $('#panel').css('height', $(window).height() - 20); 
     $('#wrapper').css('height', $(window).height() - 25).css('width', $(window).width() - 20); 
});

來源

2015-12-08 04:37:23

非常感謝:)它現在完美的工作。偉大和快速的幫助:) – RedFire

離頁滑動面板樣式不按預期工作

回答

相關問題