I debug and see that css are using <i class="icon-add Fright Fs16"></i> to paint icon. So I suppose that I need change the class by icon-minus class in layaout.js. I have tried modify the function
Code: Select all
this.menulinks.on('click',function(e) {
var menuitemLink = $(this),
menuitem = menuitemLink.parent();
...
else {
...
var logo = menuitem.context.children[3].classList[0];
if(logo == 'icon-add'){
menuitem.removeClass('icon-add');
menuitem.context.children[3].classList[0] = 'icon-minus';
}
menuitem.addClass('active-menu-parent');
menuitemLink.addClass('active-menu').next('ul').addClass('active-menu');
$this.addMenuitem(menuitem.attr('id'));
}
...
});
Regards.
Update:
I modify my icon and now the icon changes, but changes all children icons, even if they don't click it. I have changed
Code: Select all
var logo = menuitem.find('i.icon-add');
if(logo.hasClass('icon-add')){
logo.removeClass('icon-add');
logo.addClass('icon-minus');
}
Code: Select all
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.context.children[3].classList[0];
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");
}
});
Solution:
Finally I get my objective. I have iterated every level until get the icon-add class . Copy the entire function, It works on modena theme. My code is between //jmf comment.
Code: Select all
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')) {
//jmf
var enlace = menuitem.children();
if(enlace.length){
var vinculo = enlace.first();
if(vinculo.length){
var lineasVinculo = vinculo.children();
if(lineasVinculo.length){
var logo = lineasVinculo.last();
if(logo.length){
if(logo.hasClass('icon-minus')){
logo.removeClass('icon-minus');
logo.addClass('icon-add');
}
}
}
}
}
//fin jmf
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'));
});
}
//jmf
var enlace = menuitem.children();
if(enlace.length){
var vinculo = enlace.first();
if(vinculo.length){
var lineasVinculo = vinculo.children();
if(lineasVinculo.length){
var logo = lineasVinculo.last();
if(logo.length){
if(logo.hasClass('icon-add')){
logo.removeClass('icon-add');
logo.addClass('icon-minus');
}
}
}
}
}
//fin jmf
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");
}
});