【发布时间】：2016-10-19 19:20:48
【问题描述】：
我正在开发一个菜单，我想在有人点击它时更改图标。我已经更改了图标，但他们所有的孩子也更改了图标，因为他们共享同一个班级。结构类似于：
所选菜单已更改，但其子项也已更改。问题是图标改变了，因为类名和这个类名在子孙中是一样的。
HTML：
<li id="formularioMenu:j_id244" role="menuitem" class="active-menu-parent">
<a href="#" class="menulink ripplelink active-menu active-menu-restore">
<i class="icon-null"></i>
<i class="icon-folder-empty"></i>
Foo2
<i class="icon-add Fright Fs16"></i>
</a>
<ul class="menu-level-1 active-menu active-menu-restore" role="menu">
<li id="formularioMenu:j_id245" role="menuitem">
<a class="menulink ripplelink" href="http://localhost:8080/foo21.xhtml">
<i class="icon-null"></i>
<i class="icon-doc-text-1"></i>
Foo2.1</a>
</li>
<li id="formularioMenu:j_id246" role="menuitem">
<a class="menulink ripplelink" href="http://localhost:8080/foo22.xhtml">
<i class="icon-null"></i>
<i class="icon-doc-text-1"></i>
Foo2.2</a>
</li>
<li id="formularioMenu:j_id247" role="menuitem">
<a class="menulink ripplelink" href="http://localhost:8080/foo23.xhtml">
<i class="icon-null"></i>
<i class="icon-doc-text-1"></i>
Foo2.3</a>
</li>
<li id="formularioMenu:j_id248" role="menuitem">
<a class="menulink ripplelink" href="http://localhost:8080/foo24.xhtml">
<i class="icon-null"></i>
<i class="icon-doc-text-1"></i>
Foo2.4</a>
<i class="icon-add Fright Fs16"></i>
</a>
<ul class="menu-level-2" role="menu">
...
</ul>
</li>
<li id="formularioMenu:j_id249" role="menuitem">
<a class="menulink ripplelink" href="http://localhost:8080/foo25.xhtml">
<i class="icon-null"></i>
<i class="icon-doc-text-1"></i>
Foo2.5</a>
<i class="icon-add Fright Fs16"></i>
</a>
<ul class="menu-level-2" role="menu">
...
</ul>
</li>
<li id="formularioMenu:j_id250" role="menuitem">
<a href="#" class="menulink ripplelink">
<i class="icon-null"></i>
<i class="icon-folder-empty"></i>
Foo2.6
</li>
...
</ul>
</li>
有了这个 class="icon-add Fright Fs16" 我改变了图标图像。我必须在 icon-add 和 icon-minus 类之间交替。
我的 JQuery 代码的一部分，“logo”变量执行更改名称类的操作。一部分从减号变为加号，另一部分为反转：
bindEvents: function() {
var $this = this;
if(this.mobile) {
this.menuWrapper.css('overflow-y', 'auto');
}
else {
this.menuWrapper.perfectScrollbar({suppressScrollX: true});
}
this.menulinks.on('click',function(e) {
var menuitemLink = $(this),
menuitem = menuitemLink.parent();
if(menuitem.hasClass('active-menu-parent')) {
var logo = menuitem.find('i.icon-minus');
if(logo.hasClass('icon-minus')){
logo.removeClass('icon-minus');
logo.addClass('icon-add');
}
menuitem.removeClass('active-menu-parent');
menuitemLink.removeClass('active-menu active-menu-restore').next('ul').removeClass('active-menu active-menu-restore');
$this.removeMenuitem(menuitem.attr('id'));
}
else {
var activeSibling = menuitem.siblings('.active-menu-parent');
if(activeSibling.length) {
activeSibling.removeClass('active-menu-parent');
$this.removeMenuitem(activeSibling.attr('id'));
activeSibling.find('ul.active-menu,a.active-menu').removeClass('active-menu active-menu-restore');
activeSibling.find('li.active-menu-parent').each(function() {
var menuitem = $(this);
menuitem.removeClass('active-menu-parent');
$this.removeMenuitem(menuitem.attr('id'));
});
}
var logo = menuitem.find('i.icon-add');
if(logo.hasClass('icon-add')){
logo.removeClass('icon-add');
logo.addClass('icon-minus');
}
menuitem.addClass('active-menu-parent');
menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
$this.addMenuitem(menuitem.attr('id'));
}
if(menuitemLink.next().is('ul')) {
e.preventDefault();
}
else {
$this.menuWrapper.removeClass('showmenu');
$this.mobileMenuButton.removeClass('MenuClose');
}
$this.saveMenuState();
if(!$this.mobile) {
$this.menuWrapper.perfectScrollbar("update");
}
});
当函数找到它时，使用图标添加类获取所有子孙。那么如何只更改所选菜单呢？
问候。
【问题讨论】：
-
很多时候人们会使用一个类或其他东西来识别哪些项目被选中。例如，
.is-selected { //selected css } -
例如这样.. jqueryui.com/accordion
.ui-state-active -
这是一个简单功能的一大堆代码，你已经陷入了难以阅读和调试的 if/else 地狱。您是否考虑过重新开始并保持简单？就像 Kris 说的，我认为风格应该用一个类来处理。
-
@veksen 这不是我的代码，是我正在使用的模板的主题代码。
-
@KrisHollenbeck 我试过这样做但没有用。 var enlace = menuitem.find('menulink.ripplelink.active-menu');