[英]Why is my jQuery toggle not working?
我正在嘗試設置側面菜單，並在使用jQuery Toggle時遇到一些麻煩。 其他所有功能似乎都正常。 在發布之前，我確實嘗試了大約2個小時，因此感到有點沮喪（看看這是多么基本的東西）。 有什么建議么？
下面是頁面布局的格式和確切順序，我僅添加了分隔符文本（“側面菜單”，“單擊的圖像..”等），以使閱讀/理解更加容易。 任何幫助將不勝感激。
側面菜單：
<div id="SideMenu" class="sidenav">
<img class="CloseBtn" src="./wht_menu.png" />
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
<a href="#">Link 5</a>
</div>
我單擊以打開菜單的圖像：
<img class="OpenBtn" src="./blk_menu.png" />
我頁面的其余部分：
<div id="main">
My main page content goes here...
</div>
我的CSS和jQuery：
<!--Slider Menu-->
<script>
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
</script>
<style>
#SideMenu{
width: 250px;
display: none;
}
</style>
您需要將jQuery包裝在此代碼塊（ docs ）中：
$( document ).ready(function() {
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
使用您的代碼的工作示例：
jQuery當時可能沒有加載到頁面上。
<script>
(function($){
$(document).ready(function(){
$(".OpenBtn, .CloseBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
})(jQuery);
</script>
謝謝大家的幫助！ 盡管pivemi的答案不是解決方案，但對他的codepen鏈接進行了更深入的審查后，事情仍然有效，但我的文檔並未調用jQuery庫。 將其添加到頂部是我的解決方案：
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
您的CSS可能如下所示：
.menu {
position: fixed;
height: 100%;
width: 272px;
padding-bottom: 50px;
overflow: auto;
box-shadow: 0 0 10px 0 rgba(0,0,0,.75);
background-color: #fff;
z-index: 999;
display: none;}
和你的jQuery腳本：
$(document).ready(function(){
$('.show-menu').click(function(){
fade_menu();
});
$('.menu-item').click(function(){
fade_menu();
});});});
function fade_menu(){
$('.menu').fadeToggle("fast");
}
為什么我在Jquery中切換方法的替代方法不起作用？
[英]why is that my alternative to the method toggle in Jquery not working?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.