当选择其他项目时,删除切换类
Remove toggle class when other item is selected
在我的移动站点上,我有一个垂直的下拉菜单(像一个手风琴),其中每个父项都有一个向下指向的箭头来指示下拉菜单。当用户单击父项时,箭头旋转,当您再次单击它以关闭下拉菜单时,箭头旋转回其原始状态。但是,如果您不单击下拉菜单关闭它,而只是单击另一个父项,则下拉菜单关闭,但箭头保持在旋转位置。下面是代码:
$('li.nav-about').click(function () {
$('#arrow-about').toggleClass("rotate");
$(this).find('ul').toggle();
});
$(' li.nav-industry').click(function () {
$('#arrow-indusrty').toggleClass("rotate");
$(this).find('ul').toggle();
});
$('li.nav-application').click(function () {
$('#arrow-application').toggleClass("rotate");
$(this).find('ul').toggle();
});
任何建议如何删除'旋转'类时,另一个项目被点击?
编辑上面的标记是这样的:
<ul id="nav-list">
<li class="nav-list_item nav-about"><a href="#">About Us</a><div class="arrow-down" id="arrow-about"></div>
<ul>
<li>....</li>
<li>...</li>
<li>...</li>
</ul>
</li>
<li class="nav-list_item nav-products"><a href="#">Products</a><div class="arrow-down" id="arrow-products"></div>
<ul>
<li>....</li>
<li>...</li>
<li>...</li>
</ul>
</li>
您可以在切换当前按钮之前从每个按钮中删除现有的rotate
类,如:
$('li.nav-about').click(function () {
$('.rotate:not("#arrow-about")').removeClass("rotate");
$('#arrow-about').toggleClass("rotate");
$(this).find('ul').toggle();
});
(' li.nav-industry').click(function () {
$('.rotate:not("#arrow-indusrty")').removeClass("rotate");
$('#arrow-indusrty').toggleClass("rotate");
$(this).find('ul').toggle();
});
$('li.nav-application').click(function () {
$('.rotate:not("#arrow-application")').removeClass("rotate");
$('#arrow-application').toggleClass("rotate");
$(this).find('ul').toggle();
});
如果你不想改变太多的代码,就试试这个。
$('li.nav-about').click(function () {
$('#arrow-about').toggleClass("rotate");
$('#arrow-indusrty').removeClass("rotate");
$('#arrow-application').removeClass("rotate");
$(this).find('ul').toggle();
});
$(' li.nav-industry').click(function () {
$('#arrow-about').removeClass("rotate");
$('#arrow-indusrty').toggleClass("rotate");
$('#arrow-application').removeClass("rotate");
$(this).find('ul').toggle();
});
$('li.nav-application').click(function () {
$('#arrow-about').removeClass("rotate");
$('#arrow-indusrty').removeClass("rotate");
$('#arrow-application').toggleClass("rotate");
$(this).find('ul').toggle();
});
现在您可以确定每个元素,而不是被选中的元素,将会恢复到原来的状态
你可以这么做。
var toggleNavigation = function(){
var r_navigation = $('li.nav-about,li.nav-industry,li.nav-application');
$(r_navigation).each(function(i, oNav){
$(oNav).on('click',function(){
if(!$(oNav).hasClass('rotate')){
$(r_navigation).removeClass('rotate');
$(oNav).addClass('rotate');
}else{
$(oNav).removeClass('rotate');
}
});
});
};
相关文章:
- 如何使用 jQuery 删除选择标记中的多个选项
- 原型JS不删除选择元素
- 删除选择中的选项
- jQuery按索引从类中删除/选择元素
- 当给定一个数组(仅限纯Javascript)时,删除选择(多个)选项的最简单方法是什么
- 删除选择选项中的几个文本
- 使用 jQuery 添加/删除选择
- YUI - 删除选择选项
- 使用href-jquery动态删除选择选项值
- 如何删除选择字段中的列表选项项
- 使用jquery删除选择框中的选择
- 从列表javascript中删除选择值
- 如何在不删除选择框滚动条的情况下删除浏览器滚动条
- Knockout:当已在使用时,从数组中删除选择选项
- 尝试使用jQuery remove()函数删除选择框
- 如何删除选择标签的所有选项,并在javascript中分配一个新的项目列表来选择选项
- 删除选择框中除了first和selected之外的所有选项
- 如何删除“选择”下拉框中的选项
- 删除选择标签中的空白项
- 删除选择选项的方法并非在所有浏览器(JavaScript)中都有效