Please check my fiddle here: http://jsfiddle.net/o2gxgz9r/2287/
This is how it looks right now. I need help in making the plus and minus using css instead of "+" and "-" and also when you click plus sign it will collapse and the plus will became a minus.
Also I need help in aligning the element that has a submenu in this case it's "services"
function mobileMenu() {
var mobileMenu = jQuery('#mobile-menu');
var body = jQuery('body');
var mobileSubMenuTogglers = mobileMenu.find('.menu-item-has-children');
var mobileSubMenus = mobileMenu.find('.sub-menu');
jQuery('.menu-icon').on('click', function(){
mobileMenu.toggleClass('active');
body.toggleClass('no-scroll');
});
jQuery('#mobile-menu .menu-item-has-children').each(function(){
var menuElement = jQuery(this);
var subMenu = menuElement.find('.sub-menu');
var subMenuToggleElement = jQuery('<span class="toggle-sub-menu"><span class="line line-one">-</span><span class="line line-two">+</span></span>');
subMenu.before(subMenuToggleElement);
mobileSubMenuTogglers.on('click', function(){
jQuery(this).toggleClass('active');
jQuery(this).parent().find('.sub-menu').toggleClass('active');
});
});
Add with toggle function in +&-
$('.line-one,.line-two').toggle()
And add default hidden in -
style="display:none;">
var subMenuToggleElement = jQuery('<span class="toggle-sub-menu"><span class="line line-one" style="display:none;">-</span><span class="line line-two">+</span></span>');
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.