I'm using the DC jQuery Vertical Accordion Menu for my website side menu navigation. When I click on the menu item, It's expanding the sub menus. Now the current item is highlighted as active. The issue is when I'm try to move the cursor to another menu item, My current active sub menu is sliding up and it's hidden. This is my script :-
(function($){
$.fn.dcAccordion = function(options) {
//set default options
var defaults = {
classParent : 'dcjq-parent',
classActive : 'active', //change the active to 'active1'
classArrow : 'dcjq-icon',
classCount : 'dcjq-count',
classExpand : 'dcjq-current-parent',
classDisable : '',
eventType : 'hover',
hoverDelay : 300,
menuClose : true,
autoClose : false,
autoExpand : true,
speed : 'slow',
saveState : false,
disableLink : true,
showCount : false,
cookie : 'dcjq-accordion'
};
//call in the default otions
var options = $.extend(defaults, options);
this.each(function(options){
var obj = this;
$objLinks = $('li > a',obj);
$objSub = $('li > ul',obj);
if(defaults.classDisable){
$objLinks = $('li:not(.'+defaults.classDisable+') > a',obj);
$objSub = $('li:not(.'+defaults.classDisable+') > ul',obj);
}
classActive = defaults.classActive;
setUpAccordion();
if(defaults.saveState == true){
checkCookie(defaults.cookie, obj, classActive);
}
if(defaults.autoExpand == true){
$('li.'+defaults.classExpand+' > a').addClass(classActive);
}
resetAccordion();
if(defaults.eventType == 'hover'){
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: defaults.hoverDelay, // number = milliseconds for onMouseOver polling interval
over: linkOver, // function = onMouseOver callback (REQUIRED)
timeout: defaults.hoverDelay, // number = milliseconds delay before onMouseOut
out: linkOut // function = onMouseOut callback (REQUIRED)
};
$objLinks.hoverIntent(config);
var configMenu = {
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 1000, // number = milliseconds for onMouseOver polling interval
over: menuOver, // function = onMouseOver callback (REQUIRED)
timeout: 1000, // number = milliseconds delay before onMouseOut
out: menuOut // function = onMouseOut callback (REQUIRED)
};
$(obj).hoverIntent(configMenu);
// Disable parent links
if(defaults.disableLink == true){
$objLinks.click(function(e){
if($(this).siblings('ul').length >0){
e.preventDefault();
}
});
}
} else {
$objLinks.click(function(e){
$activeLi = $(this).parent('li');
$parentsLi = $activeLi.parents('li');
$parentsUl = $activeLi.parents('ul');
// Prevent browsing to link if has child links
if(defaults.disableLink == true){
if($(this).siblings('ul').length >0){
e.preventDefault();
}
}
// Auto close sibling menus
if(defaults.autoClose == true){
autoCloseAccordion($parentsLi, $parentsUl);
}
if ($('> ul',$activeLi).is(':visible')){
$('ul',$activeLi).slideUp(defaults.speed);
$('a',$activeLi).removeClass(classActive);
} else {
$(this).siblings('ul').slideToggle(defaults.speed);
$('> a',$activeLi).addClass(classActive);
}
// Write cookie if save state is on
if(defaults.saveState == true){
createCookie(defaults.cookie, obj, classActive);
}
});
}
// Set up accordion
function setUpAccordion(){
$arrow = '<span class="'+defaults.classArrow+'"></span>';
var classParentLi = defaults.classParent+'-li';
$objSub.show();
$('li',obj).each(function(){
if($('> ul',this).length > 0){
$(this).addClass(classParentLi);
$('> a',this).addClass(defaults.classParent).append($arrow);
}
});
$objSub.hide();
if(defaults.classDisable){
$('li.'+defaults.classDisable+' > ul').show();
}
if(defaults.showCount == true){
$('li.'+classParentLi,obj).each(function(){
if(defaults.disableLink == true){
var getCount = parseInt($('ul a:not(.'+defaults.classParent+')',this).length);
} else {
var getCount = parseInt($('ul a',this).length);
}
$('> a',this).append(' <span class="'+defaults.classCount+'">('+getCount+')</span>');
});
}
}
function linkOver(){
$activeLi = $(this).parent('li');
$parentsLi = $activeLi.parents('li');
$parentsUl = $activeLi.parents('ul');
// Auto close sibling menus
if(defaults.autoClose == true){
autoCloseAccordion($parentsLi, $parentsUl);
}
if ($('> ul',$activeLi).is(':visible')){
$('ul',$activeLi).slideUp(defaults.speed);
$('a',$activeLi).removeClass(classActive);
} else {
$(this).siblings('ul').slideToggle(defaults.speed);
$('> a',$activeLi).addClass(classActive);
}
// Write cookie if save state is on
if(defaults.saveState == true){
createCookie(defaults.cookie, obj, classActive);
}
}
function linkOut(){
}
function menuOver(){
}
function menuOut(){
if(defaults.menuClose == true){
$objSub.slideUp(defaults.speed);
// Reset active links
$('a',obj).removeClass(classActive);
createCookie(defaults.cookie, obj, classActive);
}
}
// Auto-Close Open Menu Items
function autoCloseAccordion($parentsLi, $parentsUl){
$('ul',obj).not($parentsUl).slideUp(defaults.speed);
// Reset active links
$('a',obj).removeClass(classActive);
$('> a',$parentsLi).addClass(classActive);
}
// Reset accordion using active links
function resetAccordion(){
$objSub.hide();
var $parentsLi = $('a.'+classActive,obj).parents('li');
$('> a',$parentsLi).addClass(classActive);
$allActiveLi = $('a.'+classActive,obj);
$($allActiveLi).siblings('ul').show();
}
});
// Retrieve cookie value and set active items
function checkCookie(cookieId, obj, classActive){
var cookieVal = $.cookie(cookieId);
if(cookieVal != null){
// create array from cookie string
var activeArray = cookieVal.split(',');
$.each(activeArray, function(index,value){
var $cookieLi = $('li:eq('+value+')',obj);
$('> a',$cookieLi).addClass(classActive);
var $parentsLi = $cookieLi.parents('li');
$('> a',$parentsLi).addClass(classActive);
});
}
}
// Write cookie
function createCookie(cookieId, obj, classActive){
var activeIndex = [];
// Create array of active items index value
$('li a.'+classActive,obj).each(function(i){
var $arrayItem = $(this).parent('li');
var itemIndex = $('li',obj).index($arrayItem);
activeIndex.push(itemIndex);
});
// Store in cookie
$.cookie(cookieId, activeIndex, { path: '/' });
}
};
})(jQuery);
I Fixed it myself. It is working now, this is the updated code.
(function($){
$.fn.dcAccordion = function(options) {
//set default options
var defaults = {
classParent : 'dcjq-parent',
classActive : 'active',
classArrow : 'dcjq-icon',
classCount : 'dcjq-count',
classExpand : 'dcjq-current-parent',
classDisable : '',
eventType : 'hover',
hoverDelay : 300,
menuClose : true,
autoClose : false,
autoExpand : true,
speed : 'slow',
saveState : false,
disableLink : true,
showCount : false,
cookie : 'dcjq-accordion'
};
//call in the default otions
var options = $.extend(defaults, options);
this.each(function(options){
//alert('hi');
var obj = this;
$objLinks = $('li > a',obj);
$objSub = $('li > ul',obj);
if(defaults.classDisable){
$objLinks = $('li:not(.'+defaults.classDisable+') > a',obj);
$objSub = $('li:not(.'+defaults.classDisable+') > ul',obj);
}
classActive = defaults.classActive;
setUpAccordion();
if(defaults.saveState == true){
checkCookie(defaults.cookie, obj, classActive);
}
if(defaults.autoExpand == true){
$('li.'+defaults.classExpand+' > a').addClass(classActive);
}
resetAccordion();
$("#menu-item-360 a").removeClass("active");
$("#menu-item-312 a").removeClass("active");
//alert(defaults.eventType);
if(defaults.eventType == 'hover'){
// alert('hover event');
var config = {
sensitivity: 2, // number = sensitivity threshold (must be 1 or higher)
interval: defaults.hoverDelay, // number = milliseconds for onMouseOver polling interval
over: linkOver, // function = onMouseOver callback (REQUIRED)
timeout: defaults.hoverDelay, // number = milliseconds delay before onMouseOut
out: linkOut // function = onMouseOut callback (REQUIRED)
};
$objLinks.hoverIntent(config);
var configMenu = {
sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)
interval: 1000, // number = milliseconds for onMouseOver polling interval
over: menuOver, // function = onMouseOver callback (REQUIRED)
timeout: 1000, // number = milliseconds delay before onMouseOut
out: menuOut // function = onMouseOut callback (REQUIRED)
};
$(obj).hoverIntent(configMenu);
// Disable parent links
if(defaults.disableLink == true){
$objLinks.click(function(e){
if($(this).siblings('ul').length >0){
e.preventDefault();
}
});
}
} else {
$objLinks.click(function(e){
//alert('click event');
$activeLi = $(this).parent('li');
$parentsLi = $activeLi.parents('li');
$parentsUl = $activeLi.parents('ul');
// Prevent browsing to link if has child links
if(defaults.disableLink == true){
if($(this).siblings('ul').length >0){
e.preventDefault();
}
}
// Auto close sibling menus
if(defaults.autoClose == true){
autoCloseAccordion($parentsLi, $parentsUl);
}
if ($('> ul',$activeLi).is(':visible')){
$('ul',$activeLi).slideUp(defaults.speed);
$('a',$activeLi).removeClass(classActive);
} else {
$(this).siblings('ul').slideToggle(defaults.speed);
//$('> a',$activeLi).addClass(classActive);
}
// Write cookie if save state is on
if(defaults.saveState == true){
//createCookie(defaults.cookie, obj, classActive);
}
});
}
// Set up accordion
function setUpAccordion(){
$arrow = '<span class="'+defaults.classArrow+'"></span>';
var classParentLi = defaults.classParent+'-li';
$objSub.show();
$('li',obj).each(function(){
if($('> ul',this).length > 0){
$(this).addClass(classParentLi);
//$('> a',this).addClass(defaults.classParent).append($arrow);
}
});
$objSub.hide();
if(defaults.classDisable){
$('li.'+defaults.classDisable+' > ul').show();
}
if(defaults.showCount == true){
$('li.'+classParentLi,obj).each(function(){
if(defaults.disableLink == true){
var getCount = parseInt($('ul a:not(.'+defaults.classParent+')',this).length);
} else {
var getCount = parseInt($('ul a',this).length);
}
$('> a',this).append(' <span class="'+defaults.classCount+'">('+getCount+')</span>');
});
}
}
function linkOver(){
//alert('hi');
$activeLi = $(this).parent('li');
$parentsLi = $activeLi.parents('li');
$parentsUl = $activeLi.parents('ul');
// Auto close sibling menus
if(defaults.autoClose == true){
var him = $(".current-menu-not-close + ul");
if(him.css('display') == 'block'){
$(".current-menu-not-close + ul").addClass("showMenu");
}else{
autoCloseAccordion($parentsLi, $parentsUl);
}
}
if ($('> ul',$activeLi).is(':visible')){
$('ul',$activeLi).slideUp(defaults.speed);
if($("a.current-menu-not-close")){
//alert("ok");
}else{
$('a',$activeLi).removeClass(classActive);
}
} else {
$(this).siblings('ul').slideToggle(defaults.speed);
//$('> a',$activeLi).addClass(classActive);
}
// Write cookie if save state is on
if(defaults.saveState == true){
//createCookie(defaults.cookie, obj, classActive);
}
}
function linkOut(){
}
function menuOver(){
}
function menuOut(){
if(defaults.menuClose == true){
$objSub.slideUp(defaults.speed);
// Reset active links
$('a',obj).removeClass(classActive);
//createCookie(defaults.cookie, obj, classActive);
}
}
// Auto-Close Open Menu Items
function autoCloseAccordion($parentsLi, $parentsUl){
$('ul',obj).not($parentsUl).slideUp(defaults.speed);
// Reset active links
$('a',obj).removeClass(classActive);
$('> a',$parentsLi).addClass(classActive);
}
// Reset accordion using active links
function resetAccordion(){
$objSub.hide();
var $parentsLi = $('a.'+classActive,obj).parents('li');
$('> a',$parentsLi).addClass(classActive);
$allActiveLi = $('a.'+classActive,obj);
$($allActiveLi).siblings('ul').show();
}
});
// Retrieve cookie value and set active items
function checkCookie(cookieId, obj, classActive){
var cookieVal = $.cookie(cookieId);
if(cookieVal != null){
// create array from cookie string
var activeArray = cookieVal.split(',');
$.each(activeArray, function(index,value){
var $cookieLi = $('li:eq('+value+')',obj);
$('> a',$cookieLi).addClass(classActive);
var $parentsLi = $cookieLi.parents('li');
$('> a',$parentsLi).addClass(classActive);
});
}
}
// Write cookie
function createCookie(cookieId, obj, classActive){
var activeIndex = [];
// Create array of active items index value
$('li a.'+classActive,obj).each(function(i){
var $arrayItem = $(this).parent('li');
var itemIndex = $('li',obj).index($arrayItem);
activeIndex.push(itemIndex);
});
// Store in cookie
$.cookie(cookieId, activeIndex, { path: '/' });
}
};
})(jQuery);
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments