添加一个类并删除当前的类，以便J Query中的按钮可以重新用于不同的函数
Add a class and remove the current one so that a button in J Query may be re-used for a different function
我14岁了，正在努力应对一种相当新的语言，所以请耐心等待。我制作了一个快速的html文档，以便尽可能清楚地表达我的问题。
如果你运行这个片段，你可以看到通过点击菜单按钮，主体被从左边推了285像素，菜单从-285像素移到了0px。
我希望能够再次点击菜单按钮，并将正文移回0，将菜单移回-285。请查看J查询下面的流程，看看我迄今为止尝试过的流程。
var main = function(){
$('.menu_button').click(function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
});
$('.menu_button_active').click(function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$('.menu_button_active').addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
/* At first, I tried to just plug in the same class name in the second function, however I
quickly realized that by doing so the menu will automatically close since both functions
will run at the same time.
My understanding is that in order for the function to being separately, the menu button
would have to have a different class at the time of the click. So, I tried using
toggleClass to remove the menu_button class while at the same time adding the
menu_button_active class so that on click, the menu_button_active class can act as the
same button, but used for a different function (closing the menu.) Perhaps my understanding
of what the toggleClass method was used for was flawed, however here is the code anyway to
show you what I had done.
$('.menu_button').toggleClass("menu_button" "menu_button_active");
in place of
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
(this doesn't work)
So, my final method is shown above. By separately adding and removing the class I don't see
why it doesn't work after working out what the js would be doing. First the menu_button
would be clicked and the page is shifted, afterwards the menu_button would have a different
class name, so that it can be called by the menu_button_active function, which then
changes the class again so that the menu button can open again and so on.
*/#first_row {
width: 100%;
height: 25em;
position: absolute;
top: 3em;
box-shadow: 0px 5px 5px #888888;
}
#sec2 {
background-color: #2CD148;
height: 100%;
width: 50%;
float: left;
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
header {
width: 100%;
height: 3em;
background-color: #404040;
position: fixed;
}
.menu {
background-color: black;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu_button {
width: 4em;
cursor: pointer;
}
.menu_button_active {
width: 4em;
cursor: pointer;
}
.menu_row {
width: 100%;
height: 0.25em;
margin-top: 0.5625em;
background-color: white;
border-bottom: 1px solid #2CD148;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}<html>
<head>
<title>Samer | Welcome</title>
<link rel="shortcut icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/Interactive.js"></script>
</head>
<body>
<header>
<div class="menu"></div>
<div class = "menu_button">
<div class = "menu_row"></div>
<div class = "menu_row"></div>
<div class = "menu_row"></div>
</div>
<span></span>
</header>
<div id = first_row>
<section id = "sec1"></section>
<section id = "sec2"></section>
</div>
</body>
</html>这个逻辑有什么缺陷？
您从javascript定义类，因此需要将事件附加到类名。看见http://api.jquery.com/on/
var main = function(){
$('body').on('click', '.menu_button', function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$(this).addClass('menu_button_active').removeClass('menu_button');
});
$('body').on('click', '.menu_button_active', function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$(this).addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);#first_row {
width: 100%;
height: 25em;
position: absolute;
top: 3em;
box-shadow: 0px 5px 5px #888888;
}
#sec2 {
background-color: #2CD148;
height: 100%;
width: 50%;
float: left;
}
body {
left: 0;
margin: 0;
overflow: hidden;
position: relative;
}
header {
width: 100%;
height: 3em;
background-color: #404040;
position: absolute;
}
.menu {
background-color: black;
left: -285px;
height: 100%;
position: fixed;
width: 285px;
}
.menu_button {
width: 4em;
cursor: pointer;
}
.menu_button_active {
width: 4em;
cursor: pointer;
}
.menu_row {
width: 100%;
height: 0.25em;
margin-top: 0.5625em;
background-color: white;
border-bottom: 1px solid #2CD148;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}<html>
<head>
<title>Samer | Welcome</title>
<link rel="shortcut icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="icon" href="media_items/favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/Interactive.js"></script>
</head>
<body>
<header>
<div class="menu"></div>
<div class = "menu_button">
<div class = "menu_row"></div>
<div class = "menu_row"></div>
<div class = "menu_row"></div>
</div>
<span></span>
</header>
<div id = first_row>
<section id = "sec1"></section>
<section id = "sec2"></section>
</div>
</body>
</html>您丢失了.menu_button_active，我看不到任何代码。您的第二次点击功能永远不会运行，因为触发器按钮丢失了。
var main = function(){
$('body').on('click', '.menu_button', function(){
// $('.menu_button').click(function(){
$('.menu').animate({left: '0px'}, 200);
$('body').animate({left: '285px'}, 200);
$('.menu_button').addClass('menu_button_active').removeClass('menu_button');
});
$('body').on('click', '.menu_button_active', function(){
$('.menu').animate({left: '-285px'}, 200);
$('body').animate({left: '0px'}, 200);
$('.menu_button_active').addClass('menu_button').removeClass('menu_button_active');
});
};
$(document).ready(main);
相关文章：
- 是否有任何可能的原因使我应该指定类型＝“”;按钮“;用于我的按钮元素
- Bootstrap折叠按钮不适用于android
- 按钮，用于更改Rails中的数据库值
- 清除按钮不适用于我的javascript和hmtl5画布
- 折叠导航按钮不适用于twitter引导程序设计的移动设备
- 取消按钮不适用于确认窗口
- 浮动左侧按钮，用于呼叫我和联系我
- “创建”按钮，用于切换不包含特定文本颜色的表行的可见性
- 自定义上一个和下一个按钮，用于光滑的滑块
- 引导下拉按钮不适用于版本 3.3.6
- Facebook按钮不适用于Iron-Router
- PHP-AJAX:如何在表单上使用两个提交按钮，每个按钮都用于不同的目的
- HTML 选择语句和按钮不适用于PayPal
- 视图中的按钮，用于调用控制器操作以更新数据库列
- 打印页面上的按钮，用于打印另一页
- 下一个和上一个箭头按钮，用于使用 JavaScript 浏览 Web URL
- Jquery加载更多按钮，用于具有自定义帖子类型的Wordpress
- 添加一个按钮，用于关闭带有弹出窗口.js的弹出窗口
- html页面上的多个按钮，用于逐步显示文本，而不是同时显示文本
- 引导按钮不适用于 jquery 插件
