javascript 单击时 Jquery 切换类，如果单击另一个菜单项，则删除类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13510926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Jquery toggle class on click, and remove class if another menu item clicked
提问by Doidgey
My code is:
我的代码是：
$(document).ready(function() {
$(".more").click(function(e) {
$(this).toggleClass("open");
if (!$(".more").hasClass(".icon-arrow-down")) {
// alert('Yep has class');
$(this).toggleClass("icon-arrow-down");
$(this).toggleClass('icon-arrow-up');
}
else {
// alert('all ok');
}
});
});
A little messy as i was testing some things out. Basically i have a menu, with a .moreclass added for dropdowns. People on mobile click the more, which adds a class of .opento the menu so people can see it. Now my problem is, this code doesn't seem to work 100% of the time.
有点乱，因为我正在测试一些东西。基本上我有一个菜单，.more为下拉菜单添加了一个类。移动设备上的人们点击更多，这会.open在菜单中添加一类，以便人们可以看到它。现在我的问题是，这段代码似乎不能 100% 地工作。
Sometimes the classes get confused and i end up with a menu open, but a class of icon-arrow-downstill.
有时课程会变得混乱，我最终会打开一个菜单，但icon-arrow-down仍然是一类。
And also, how would i add something in so that the openclass gets removed if another morebutton is clicked?
而且，open如果more单击另一个按钮，我将如何添加一些内容以便删除该类？
Help appreciated as always.
帮助一如既往地受到赞赏。
回答by Bruno
Shouldn't you just be checking if the current element has the .icon-arrow-down class. So rather than
您不应该只是检查当前元素是否具有 .icon-arrow-down 类。所以而不是
if (!$(".more").hasClass(".icon-arrow-down"))
this
这
if (!$(this).hasClass(".icon-arrow-down"))
Maybe consider using
也许考虑使用
$(".more").click(function(e) {
if( $(this).hasClass("open") ) {
$(this).removeClass("open").addClass("closed");
} else {
// if other menus are open remove open class and add closed
$(this).siblings().removeClass("open").addClass("closed");
$(this).removeClass("closed").addClass("open");
}
});
Then use the .open and .closed class to set your arrow styles
然后使用 .open 和 .closed 类来设置你的箭头样式
Fiddle here.
在这里摆弄。
Simple but shows you what you can do.
很简单，但会告诉你你能做什么。
回答by Wojciech Beling
In menus I always use something like this:
在菜单中，我总是使用这样的东西：
$(document).ready(function() {
$(".more").click(function(e) {
if($(this).hasClass("open")) {
// if it's open then just close it
$(this).removeClass("open");
} else {
// if it's closed, then close everything else and open it
$(".more").removeClass("open");
$(this).addClass("open");
}
/* TODO: now do something similar with icon-arrow */
});
});
回答by jfrej
You could remove the class .openfrom all and then add it to the clicked one:
您可以.open从所有类中删除该类，然后将其添加到单击的类中：
$(document).ready(function() {
var $more = $(".more");
$more.click(function(e) {
var $this = $(this);
if ($this.hasClass("open") {
$more.removeClass("open");
} else {
$more.removeClass("open");
$this.addClass("open");
}
});
});
