我的 JS 文件中有以下代码:
jQuery("document").ready(function (e) {
var menu = e(".menu-container");
var button = e(".menu-functions");
e(window).scroll(function () {
if (e(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function(){
if(button.hasClass('collapse'))
{
button.addClass('expand');
button.removeClass('collapse');
}
if(button.hasClass('expand'))
{
button.addClass('collapse');
button.removeClass('expand');
}
});
});
现在我需要让 //问题区域
下的部分开始工作。我认为 jQuery 中有一个 toggleClass
,对吧?一些先进的条件可以解决问题,但我仍在学习,我需要一些帮助。我还需要找到一种方法来 animate()
.menu-container
div,无论按钮状态是展开还是折叠:
- 如果按钮在具有
expand
类时被单击- 使用 98px 从下到上为菜单设置动画;
- 如果按钮在具有
collapse
类时被单击- 使用 98 像素从上到下为菜单设置动画。
编辑 - JSFIDDLE: jsfiddle.net/rcdhnh7L
最佳答案
试试这样吧。不要使用 e
作为 jQuery 的 var,这很奇怪。我简化了问题区域以直接获取您想要的元素,而不是迭代现有集合。
jQuery("document").ready(function ($) {
var menu = $(".menu-container");
var button = $(".menu-functions");
$(window).scroll(function () {
if ($(this)
.scrollTop() > 150) {
menu.addClass("f-nav");
button.addClass("collapse-expand");
button.addClass('collapse');
} else {
menu.removeClass("f-nav");
button.removeClass("collapse");
button.removeClass("expand");
button.removeClass("collapse-expand");
}
});
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse').addClass('expand').removeClass('collapse');
$('.menu-functions.expand').addClass('collapse').removeClass('expand');
});
});
或者这也应该有效:
//problem area
$('#menu-functions').click(function () {
$('.menu-functions.collapse, .menu-functions.expand').toggleClass('expand collapse');
});
关于javascript - jQuery 切换类并在单击时更改它,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30870166/