为什么我的jQuery切换不起作用？
[英]Why is my jQuery toggle not working?
问题描述
I'm trying to set up a side menu and having some trouble with the jQuery Toggle. 
我正在尝试设置侧面菜单，并在使用jQuery Toggle时遇到一些麻烦。 Everything else seems to function fine. 其他所有功能似乎都正常。 I did try for a about 2 hours before posting here, so been getting a little frustrated (seeing how this is pretty basic stuff). 在发布之前，我确实尝试了大约2个小时，因此感到有点沮丧（看看这是多么基本的东西）。 Any suggestions? 有什么建议么？
Below is the format and exact order of my page layout, I only added separator text ("The side menu", "Image I click..", etc.) to make reading/understanding easier. 下面是页面布局的格式和确切顺序，我仅添加了分隔符文本（“侧面菜单”，“单击的图像..”等），以使阅读/理解更加容易。 Any help would be greatly appreciated. 任何帮助将不胜感激。
The side menu: 侧面菜单：
<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>
Image I click to open the menu: 我单击以打开菜单的图像：
<img class="OpenBtn" src="./blk_menu.png" />
The rest of my page: 我页面的其余部分：
<div id="main">
My main page content goes here...
</div>
My CSS & jQuery: 我的CSS和jQuery：
<!--Slider Menu-->
<script>
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
</script>
<style>
#SideMenu{
width: 250px;
display: none;
}
</style>
4 个解决方案
解决方案1
1 2016-10-16 17:55:18
You need to wrap the jQuery in this block ( docs ): 您需要将jQuery包装在此代码块（ docs ）中：
$( document ).ready(function() {
$(".OpenBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
Working example using your code: 使用您的代码的工作示例：
http://codepen.io/anon/pen/xEaqqA http://codepen.io/anon/pen/xEaqqA
解决方案2
0 2016-10-16 18:02:22
There is a possibility that jQuery not loaded on page at the time. jQuery当时可能没有加载到页面上。
<script>
(function($){
$(document).ready(function(){
$(".OpenBtn, .CloseBtn").click(function() {
$("#SideMenu").fadeToggle("fast", "swing");
});
});
})(jQuery);
</script>
解决方案3
0
Thanks for your help everyone! 谢谢大家的帮助！ Although pivemi's answer was not the solution, a deeper review of his codepen link got things working, my doc wasn't calling on the jQuery library. 尽管pivemi的答案不是解决方案，但对他的codepen链接进行了更深入的审查后，事情仍然有效，但我的文档并未调用jQuery库。 Adding this to the top was my solution: 将其添加到顶部是我的解决方案：
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
解决方案4
-1 2016-10-16 17:53:08
Your CSS could look like this: 您的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;}
And your jQuery script: 和你的jQuery脚本：
$(document).ready(function(){
$('.show-menu').click(function(){
fade_menu();
});
$('.menu-item').click(function(){
fade_menu();
});});});
function fade_menu(){
$('.menu').fadeToggle("fast");
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.