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，而无需隐藏切换菜单问题。抱歉格式不正确的问题！ –