0
我創建了一個slideToggle菜單，由於某種原因，它在上下滑動時似乎會跳來跳去。當菜單上下滑動時，滑動標題的邊框底部只會飛過並出現毛刺，否則slideToggle會正常工作。爲什麼我的slideToggle有一個奇怪的跳轉故障？
我試着將.headermenu的位置設置爲相對以及隱藏溢出，但這兩個都沒有解決問題。滑動切換隻是無法與邊框底部正常工作，或者是我的代碼中的問題？
該故障很難解釋，但故障顯示在我的代碼片段中，所以我建議您查看它以瞭解發生了什麼。基本上，當菜單滑落時，邊框底部會彈起。
爲了激活下拉你必須點擊角落裏的小破圖像，這將激活菜單標題（這樣你就可以看到運行中的故障。）
是它涉及到某種動畫的起始高度？我是否需要動畫從頁面中的特定位置開始，還是完全不同？
$(document).ready(function(){
$("button").click(function(){
$(".headermenu").slideToggle();
$(".headermenu").height('150')
});
});* {
box-sizing: border-box;
}
@font-face {
font-family: 'monaco';
src: url('monaco-webfont.woff2') format('woff2'),
url('monaco-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
a {
font-family: 'monaco';
font-size: 16px;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:visited {
color: blue;
}
body {
margin: 0px;
}
button {
background: none;
border: none;
float: right;
margin-right: 40px;
margin-top: 15px;
padding: 0px;
}
#hamburger {
padding-top: 2px;
width: 27px;
}
header {
background-color: blue;
border-bottom: solid white 1px;
color: white;
float: left;
height: 60px;
padding-top: 4px;
position: fixed;
width: 100%;
z-index: 150px;
}
.headermenu {
background-color: blue;
border-bottom: solid white 1px;
color: white;
display: none;
font-family: 'monaco';
height: 200px;
overflow: hidden;
padding-top: 40px;
position: relative;
width: 100%;
/*-webkit-transition: all .5s;
transition: all .5s;
height: 0;*/
}
.headermenu a {
color: white;
float: right;
padding-right: 40px;
text-decoration: none;
}
.headermenu a:hover {
text-decoration: underline;
}
.headermenu a:visited {
color: white;
}
#headermenuleft {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuleft ul {
list-style-type: none;
}
#headermenuright {
float: right;
line-height: 25px;
text-align: left;
}
#headermenuright ul {
list-style-type: none;
}<!DOCTYPE HTML>
<html>
<head>
<link href="css/main.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="js/main.js"></script>
<title>Why Have There Been No Great Women Artists?</title>
</head>
<body>
<header>
<button><img id="hamburger" src="images/Menu,_Web_Fundamentals_(White).svg.png"></button>
<a id="home" href="index.html">Why Have There Been No Great Women Artists?</a>
<div class="headermenu">
<div id="headermenuleft">
<ul>
<li><a href="./georgia.html">Georgia O'Keeffe</a></li>
<li><a href="./frida.html">Frida Kahlo</a></li>
<li><a href="./artemesia.html">Artemisia Gentileschi</a></li>
</ul>
</div>
<div id="headermenuright">
<ul>
<li><a href="essay/essay.pdf">The Essay</a></li>
<li><a href="./judy.html">Judy Chicago</a></li>
<li><a href="./kara.html">Kara Walker</a></li>
<li><a href="./mendieta.html">Ana Mendieta</a></li>
</ul>
</div>
</div>
</header>
</body>
</html>
請仔細閱讀http://stackoverflow.com/help/mcve瞭解如何提出問題最好該社區。看起來有很多CSS和HTML是無關緊要的。請考慮編輯它 –
@KScandrett我現在盡我所能地編輯了CSS和HTML，而無需隱藏切換菜單問題。抱歉格式不正確的問題！ –