所以我正在尝试创建一个外部菜单面板，当我点击一个按钮时它会打开，当我再次点击时它会关闭。
外部面板工作正常，但我的 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 都不会更改它。例如，当我调整浏览器大小时，最大宽度不起作用，我不知道为什么...
希望有人能帮帮我。
提前致谢:)
最佳答案
试试这段代码。我认为这将解决您遇到的问题:
$(window).resize(function() {
$('#panel').css('height', $(window).height() - 20);
$('#wrapper').css('height', $(window).height() - 25).css('width', $(window).width() - 20);
});
关于jquery - 页外滑动面板样式未按预期工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34124426/