0
$(document).ready(function() {
\t \t \t $(".logo").click(function() {
\t \t \t \t $("#list").slideToggle(400);
\t \t \t });
\t \t \t $(window).resize(function() {
\t \t \t if ($(window).width() < 767) {
\t \t \t \t $("#list").slideUp(0);
\t \t \t } else {
\t \t \t \t $("#list").slideDown(0);
\t \t \t }
\t \t \t });
\t \t });* {
\t padding: 0px;
\t margin: 0px;
}
#wholeNav {
\t height: 580px;
\t top: 0;
\t background-color: rgba(0, 0, 0, 0.8); \t \t \t \t /* BACKGROUND OPACITY */
\t margin: 0;
\t padding: 0;
}
#wholeNav::after {
\t content: "";
\t display: block;
\t position: absolute;
\t top: 0;
\t background-size: cover;
\t background-attachment: fixed;
\t background-position: center;
\t background-image: url(background.jpg); \t \t \t \t \t /* WHOLE BACKGROUND */
\t height: 580px;
\t width: 100%;
\t z-index: -2;
}
\t #wholeNav img[src="ham.png"] {
\t \t height: 100px;
\t \t display: none;
\t }
\t #navBar {
\t \t background-color: red;
\t \t max-width: 1200px;
\t \t margin: auto;
\t \t position: relative;
\t \t height: 100px;
\t \t width: 100%;
\t \t z-index: 10;
\t }
\t \t #list {
\t \t \t float: right;
\t \t \t width: 70%;
\t \t \t position: relative;
\t \t \t max-height: 100px;
\t \t \t margin: 0;
\t \t \t padding: 0;
\t \t \t background-color: green;
\t \t }
\t \t \t #list li {
\t \t \t \t float: right;
\t \t \t \t list-style-type: none;
\t \t \t \t display: inline;
\t \t \t \t margin-right: 10%;
\t \t \t \t font-size: 20px;
\t \t \t \t line-height: 100px;
\t \t \t \t padding: 0;
\t \t \t \t text-transform: uppercase;
\t \t \t }
\t \t \t \t li a {
\t \t \t \t \t text-decoration: none;
\t \t \t \t \t color: black;
\t \t \t \t }
\t \t \t \t a:hover { \t \t \t \t \t \t \t \t \t \t /* COLOR LETTER WEB VERSION */
\t \t \t \t \t color: yellow;
\t \t \t \t \t transition: 0.2s;
\t \t \t \t }
\t \t #navBar img[src="logo.png"] {
\t \t \t height: 100%;
\t \t \t margin: 0;
\t \t \t padding: 0;
\t \t }
@media screen and (max-width: 768px) {
\t #wholeNav {
\t \t margin-top: 0;
\t \t height: 500px;
\t }
\t #wholeNav::after {
\t \t height: 500px;
\t }
\t \t #wholeNav img[src="ham.png"] {
\t \t \t display: block;
\t \t \t height: 16px;
\t \t \t width: 22px;
\t \t \t padding: 14px 0;
\t \t \t margin-left: 6%;
\t \t }
\t \t #navBar {
\t \t \t position: fixed;
\t \t \t top: 0;
\t \t \t height: 44px;
\t \t \t margin-top: 0;
\t \t }
\t \t \t #list {
\t \t \t \t margin: 0;
\t \t \t \t width: 100%;
\t \t \t \t max-height: 218px;
\t \t \t \t overflow: hidden;
\t \t \t \t z-index: 2;
\t \t \t }
\t \t \t \t #list li {
\t \t \t \t \t display: block;
\t \t \t \t \t float: none;
\t \t \t \t \t width: 88%;
\t \t \t \t \t border-bottom: 1px solid rgba(0, 0, 0, 0.6);
\t \t \t \t \t font-size: 18px;
\t \t \t \t \t margin-left: 6%;
\t \t \t \t \t line-height: 40px;
\t \t \t \t \t text-transform: none;
\t \t \t \t }
\t \t \t \t a:hover { \t \t \t \t \t \t \t \t \t \t /* COLOR LETTER MOBILES VERSION */
\t \t \t \t \t color: yellow;
\t \t \t \t \t transition: 0.2s;
\t \t \t \t }
\t \t \t \t #navBar ul li:last-child {
\t \t \t \t \t border-bottom: 0px solid green;
\t \t \t \t }<div id="navBar">
\t \t \t <img class="logo" src="ham.png">
\t \t \t <img src="logo.png">
\t \t \t <ul id="list">
\t \t \t \t <li> <a href="#"> Kop1 </a> </li>
\t \t \t \t <li> <a href="#"> Kop2 </a> </li>
\t \t \t \t <li> <a href="#"> Kop3 </a> </li>
\t \t \t \t <li> <a href="#"> Kop4 </a> </li>
\t \t \t \t <li> <a href="#"> Kop5 </a> </li>
\t \t \t </ul>
\t \t </div>我正在一個導航欄上。當我點擊.logo-class（漢堡包圖標）時，菜單必須向下滑動。 #list是菜單。而當我再次按下時，菜單必須向上滑動。所以我用slideToggle()。當頁面加載時，#list需要有0的高度。但是現在該功能不起作用。有沒有辦法將高度設置爲自動？我使用resize（），因爲我的網站有移動版本和網頁版本。
當頁面加載時，如果body.width爲< 768px，則一定不會出現綠色部分（#list）。這是移動版本。
這將是更有益的，如果你能發佈工作片斷顯示問題 - 或者最至少你的HTML和CSS。單靠JS並不能真正幫助識別問題。 –
這是你在找什麼？ https://jsfiddle.net/2mxo7zdq/1/ –
是的，那種。但問題是，如果你重新加載，你會看到幾毫秒的div。一種閃爍，這不是我想要的。 – Soccerlife