0
我正在使用下面的代碼來創建一個響應meny。但問題是，在單擊它不會轉變爲預期的，它開啓瞬間CSS：無法轉換dropdrop菜單
$('document').ready(function() {
$('.navicon-container').click(function() {
$('header nav').toggle();
// $('header nav ul').toggleClass('showing');
})
})*{
margin: 0;
padding: 0;
}
body{
font-size: 62.5%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header{
background-color: #222222;
}
.nav-container{
margin: 0 100px;
}
.nav-container:after{
content: " ";
display: block;
clear: both;
}
nav ul{
font-size: 2em;
list-style-type: none;
transition: height 0.6s;
}
ul li{
display: inline;
}
ul li a{
display: inline-block;
text-decoration: none;
padding: 10px 25px;
color: #bdbdbd;
}
ul li a:hover{
color: #ffffff;
background-color: rgba(212, 212, 212, 0.3);
}
header h1{
float: left;
margin: 0;
font-size: 2em;
padding: 10px 0px;
color: #bdbdbd;
}
header nav{
float: right;
}
.navicon-container{
border: 1px solid rgba(247, 239, 241, 0.87);
display: inline-block;
margin: 7px 0;
border-radius: 4px;
/* display: none; */
float: right;
padding: 5px 6px;
display: none;
cursor: pointer;
}
.navicon{
border-top: 10px double #ffffff;
border-bottom: 3px solid #ffffff;
height: 4px;
width: 20px;
/*margin: 10px 10px;*/
padding: 0px 2px;
}
@media screen and (max-width: 880px) {
.nav-container {
margin: 0 25px;
font-size: 1em;
}
header nav ul{
height: 0;
}
.showing{
height: 160px;
}
.nav-container a{
font-size: 0.8em;
}
.navicon-container{
display: inline-block;
}
header nav{
display: none;
float: none;
clear: both;
text-align: center;
}
ul li {
display: block;
}
ul li a{
display: block;
border-radius: 2.5px;
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<header>
<div class="nav-container">
<h1>ORG</h1>
<div class="navicon-container">
<div class="navicon">
</div>
</div>
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
</header>。
請問有什麼問題請幫忙？
這裏是鏈接到演示上的jsfiddle https://jsfiddle.net/ppat/Ldvyfdes/
感謝
你期待什麼轉變？ 'toggle（）;'只是將一個項目設置爲'display：none;'，然後返回到它原來的顯示畫面，它沒有內在的轉換。 – Santi
我想滑下/點擊 – Cody