jQuery .slideToggle（）不工作

我想爲我的網站構建一個移動友好的導航欄，我想使用菜單鏈接後滑下的菜單。我認爲這會很簡單，但它不起作用。當我點擊鏈接「菜單」時，沒有任何反應。它應該使用jQuery的.slideToggle功能來顯示菜單。如果您可以提供修復或其他方法來製作響應性和移動友好的菜單。jQuery .slideToggle（）不工作

<script> 
$(document).ready(function(){ 

    $("#burger").click(function(){ 
     $("#menu").slideToggle(); 
    }); 
}); 
</script> 
<!-- END OF SCRIPTS --> 

<!-- HEADER --> 
<header> 
    <div id="top"> 
     <a href="#" id="logo"><img src="root/logo.png"></a> 

     <div id="burger"> 
      <a>Menu</a> 
     </div> 
    </div> 

    <nav id="navbar"> 
     <ul id="menu"> 
      <li><a href="#">Option 1</a></li> 
      <li><a href="#">Option 2</a></li> 
      <li><a href="#">Option 3</a></li> 
      <li><a href="#">Option 4</a></li> 
      <li><a href="#">Option 5</a></li> 
     </ul> 
    </nav> 
</header> 
<!-- END HEADER --> 
</body> 
</head>

這是我的CSS：

/* HEADER */ 
header { 
    width: 100%; 
    background-color: #012d5a; 
    height: 150px; 
} 

#top { 
    width: 80%; 
    margin-left: auto; 
    margin-right: auto; 
} 

#top img{ 
    height: 110px; 
    margin-left: 0px; 
} 

#navbar { 
    width: 100%; 
    height: 40px; 
    background-color: #B9E0F6; 
    display: block; 
    color: #000; 
    font-family: helvetica; 
    font-size: 16px; 
    font-weight: 600; 
} 

#menu { 
    display: block; 
    width: 600px; 
    margin: auto; 
    height: 40px; 
} 

#menu li { 
    float: left; 
    width: 120px; 
    display: inline; 
    padding-top: 10px; 
    height: 40px; 
    border-right: 2px solid #000; 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    text-align: center; 
} 

#menu li:last-child { 
    border-right: 0; 
} 

#burger { 
    display: none; 
    float: right; 
} 

/* Responsive Menu */ 
@media only screen and (max-device-width: 767px) { 
/* define mobile specific styles here */ 

#burger { 
    display: block; 
} 

#navbar { 
    height: auto; 
    position: relative; 
    z-index: 1; 
} 

#menu { 
    display: none; 
    height: 200px; 
    width: 100%; 
} 

#menu li { 
    display: block; 
    float: none; 
    width: 50%; 
    border: none; 
    margin: auto; 
} 

#top { 
    width: 100%; 
} 

}

來源

2015-06-21 The Gibbinold

究竟是什麼問題？這工作不在哪裏？ – vcanales

你想要的總是很難理解，你仍然可以刪除顯示：無漢堡div類。 – divy3993

當我點擊菜單按鈕，菜單不下來。它根本沒有出現 –

你的菜單隱藏在CSS，試試這個來代替：

$("#burger").click(function(){ 
 
     $("#navbar").slideToggle(); 
 
    });

/* HEADER */ 
 
header { 
 
    width: 100%; 
 
    background-color: #012d5a; 
 
    height: 150px; 
 
} 
 

 
#top { 
 
    width: 80%; 
 
    margin-left: auto; 
 
    margin-right: auto; 
 
} 
 

 
#top img{ 
 
    height: 110px; 
 
    margin-left: 0px; 
 
} 
 

 
#navbar { 
 
    width: 100%; 
 
    height: 40px; 
 
    background-color: #B9E0F6; 
 
    display: block; 
 
    color: #000; 
 
    font-family: helvetica; 
 
    font-size: 16px; 
 
    font-weight: 600; 
 
} 
 

 
#menu { 
 
    display: block; 
 
    width: 600px; 
 
    margin: auto; 
 
    height: 40px; 
 
} 
 

 
#menu li { 
 
    float: left; 
 
    width: 120px; 
 
    display: inline; 
 
    padding-top: 10px; 
 
    height: 40px; 
 
    border-right: 2px solid #000; 
 
    box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    -webkit-box-sizing:border-box; 
 
    text-align: center; 
 
} 
 

 
#menu li:last-child { 
 
    border-right: 0; 
 
} 
 

 
#burger { 
 
    float: right; 
 
    color: #B9E0F6; 
 
    margin-top: 24px; 
 
    font-size: 24px; 
 
    cursor: pointer; 
 
    text-decoration: underline; 
 
} 
 

 
/* Responsive Menu */ 
 
@media only screen and (max-device-width: 767px) { 
 
/* define mobile specific styles here */ 
 

 
#burger { 
 
    display: inline-block; 
 
} 
 

 
#navbar { 
 
    height: auto; 
 
    position: relative; 
 
    z-index: 1; 
 
} 
 

 
#menu { 
 
    display: none; 
 
    height: 200px; 
 
    width: 100%; 
 
} 
 

 
#menu li { 
 
    display: block; 
 
    float: none; 
 
    width: 50%; 
 
    border: none; 
 
    margin: auto; 
 
} 
 

 
#top { 
 
    width: 100%; 
 
} 
 

 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 
<body> 
 
<!-- Scripts Here --> 
 
<script type = "text/javascript" src="script/jquery-2.1.4.min.js"></script> 
 
<script type = "text/javascript" src="script/bootstrap.min.js"></script> 
 
<!-- END OF SCRIPTS --> 
 

 
<!-- HEADER --> 
 
<header> 
 
    <div id="top"> 
 
     <div style="display:inline-block"> 
 
     <a href="#" id="logo"><img src="http://doc.jsfiddle.net/_images/jsfiddle-logo-thumb.png" /></a> 
 
     </div> 
 

 
     <div id="burger"> 
 
      <a>Menu</a> 
 
     </div> 
 
    </div> 
 

 
    <nav id="navbar"> 
 
     <ul id="menu"> 
 
      <li><a href="#">Option 1</a></li> 
 
      <li><a href="#">Option 2</a></li> 
 
      <li><a href="#">Option 3</a></li> 
 
      <li><a href="#">Option 4</a></li> 
 
      <li><a href="#">Option 5</a></li> 
 
     </ul> 
 
    </nav> 
 
</header> 
 
<!-- END HEADER -->

來源

2015-06-21 21:11:55 oMiKeY

Nah，這似乎沒有太大影響，但感謝您嘗試 –

jQuery .slideToggle（）不工作

回答

相關問題