水平菜单可选择的项目与箭头按钮
Horizontal menu selectable items with arrows buttons
我正在制作一个菜单,您可以在其中选择项目单击它们或使用菜单中的箭头项目移动。好。我在使用选择器恢复的集合中使用选定的类标记选定的项:
$('.mainSlider li:not(.leftBounce,.rightBounce)'); //All li items inside mainSlider without leftBounce and rightBounce classes
问题是leftBounce和rightBounce箭头项目也被标记(它们没有出现在之前的集合中,所以我对此感到困惑)。
我有下一个<ul>
和项目。
<ul>
<li class="leftBounce"><span class="spanBig"> < </span></li>
<li><span class="spanBig">A</span><span class="spanMedium">ROW</span><span class="spanMedium">GREENS</span></li>
<li><span class="spanBig">B</span><span class="spanMedium">ROW</span><span class="spanMedium">LIGHTS</span></li>
<li><span class="spanBig">C</span><span class="spanMedium">ROW</span><span class="spanMedium">GOLD/BROWN</span></li>
<li><span class="spanBig">D</span><span class="spanMedium">ROW</span><span class="spanMedium">BLUE</span></li>
<li><span class="spanBig">E</span><span class="spanMedium">ROW</span><span class="spanMedium">BLACK</span></li>
<li class="rightBounce"><span class="spanBig"> > </span></li>
</ul>
我有下一个JS代码:
var mainli = $('.mainSlider li:not(.leftBounce,.rightBounce)');
var mainliSelected;
var mainLeftBounce = $('.mainSlider .leftBounce');
var mainRightBounce = $('.mainSlider .rightBounce');
/* Main Right Navigation*/
mainRightBounce.click(function(){
if(mainliSelected){
mainliSelected.removeClass('selected');
next = mainliSelected.next();
if(next.length > 0){
mainliSelected = next.addClass('selected');
}else{
mainliSelected = mainli.eq(0).addClass('selected');
}
}else{
mainliSelected = mainli.eq(0).addClass('selected');
}
});
/* Main Right Navigation*/
/* Main Left Navigation*/
mainLeftBounce.click(function(){
if(mainliSelected){
mainliSelected.removeClass('selected');
next = mainliSelected.prev();
if(next.length > 0){
mainliSelected = next.addClass('selected');
}else{
mainliSelected = mainli.last().addClass('selected');
}
}else{
mainliSelected = mainli.last().addClass('selected');
}
});
/* Main Left Navigation*/
这里有一个和的例子:https://jsfiddle.net/zomoxp9L/
只要做两件事,它就会像预期的那样工作:
在主右导航功能中:
next = mainliSelected.next().not('.rightBounce');
在主左侧导航功能
next = mainliSelected.prev().not('.leftBounce');
查看更新后的提琴:https://jsfiddle.net/zomoxp9L/
相关文章:
- 使用JavaScript或jQuery检查单选按钮选择是否与数组中的项目匹配
- 更新:仅根据单选按钮和所选选项选择特定项目
- 如何在猫头鹰旋转木马中滑动所有可见项目,而不是使用上一个/下一个按钮
- 单击按钮可更改多个跨度项目
- Codrops页面转换.如何创建单独的按钮,而不是列表项目的效果
- 使用按钮使项目可见
- jQuery Mobile列表视图,将投票按钮添加到行项目中
- Javascript检查循环中项目的所有按钮
- 通过单击按钮将选项卡(项目)添加到选项卡面板,扩展
- 在 SharePoint 2010 上创建“添加新项目”按钮
- 尝试换行按钮和项目
- 如果在选择列表中选择了 4 个以上的项目,如何禁用按钮
- 使用 UI 可排序,在单击按钮时根据给定值将项目移动到新位置
- 当用户点击后退按钮时,如何加载项目
- ExtJS 5 - 从商店动态将项目添加到拆分按钮菜单
- 文件上传按钮在科尔多瓦/Phonegap项目中仍然不起作用
- 单选按钮组显示所选值 jQuery 上的项目
- 按按钮从阵列中删除项目
- 用于将多个下拉列表中的选定项目复制到文本框的按钮
- 下一个和上一个按钮将在OWL旋转木马上滑动2个项目