点击仅适用于第一项
所以我有一个小菜单分成4个部分“汉堡包,包,孩子,侧”。这很简单,当用户点击其中一个时,会出现相关部分。点击仅适用于第一项
我写的jQuery的这一点来实现:
$(document).ready(function() {
var menu = $(".menus");
var menuItem = $('.menu-nav ul > li');
menuItem.on("click", function() {
var menuClass = $(this).attr('class');
console.log(menuClass);
menu.next('.' + menuClass).toggleClass("menu-active");
});
});
作品不够好。点击所有列表项后,当我检查控制台时,显示正确的类名称。
但是,类名菜单激活只适用于第一个 - “汉堡” - 一旦汉堡被点击。如果我点击其他任何项目,该课程将不会被应用。
有什么想法?非常感激。
编辑:
对不起,我应该更清楚。 HTML结构是:
<div class="menus">
<nav class="menu-nav">
<ul>
<li class="Burgers">Burgers</li>
<li class="Packs">Packs</li>
<li class="Kids">Kids</li>
<li class="Sides">Sides</li>
</ul>
</nav>
<div class="menu-group Burgers">
<div class="menu">
Stuff here.
</div>
</div>
<div class="menu-group Packs">
<div class="menu">
Stuff here.
</div>
</div>
</div>
所以被点击一个里的项目时,下一个DIV与匹配类中找到(例如,“汉堡”),然后类的“菜单活性”被施加到该div 。
这应该工作:
$(document).ready(function() {
var menu = $(".menus");
var menuItem = $('.menu-nav ul > li');
menuItem.on("click", function() {
var menuClass = $(this).attr('class');
console.log(menuClass);
$("div.menu-group").removeClass("menu-active");
$("div."+menuClass).first().addClass("menu-active");
});
});
请尽量解决和不只是展示问题出在那里...... – 2014-09-03 06:28:14
您可以更改:
menu.next('.' + menuClass).toggleClass("menu-active");
到:
$(this).addClass('menu-active').siblings('li').removeClass('menu-active');
你可能是对的,但是OP在.menu旁边切换课程而不是.menu li .... – 2014-09-03 06:30:13
我实际上是试图用同一个类切换下一个div,而不是li项。对不起,应该有指定。 – Pete 2014-09-03 06:31:20
向我们展示你的菜单HTML结构 – RajivRisi 2014-09-03 06:32:04