简体   繁体   中英

jQuery Accordion Menu - Keep Active Menu open

I can not keep my Menu opened and I am having problem to follow to the Link of the Menu instead to to slide down. The slide down should be done by right floated counter.

The Code to keep opened at current page

$(document).ready( function() {
    $('#cssmenu ul li.has-sub').parent().show();
    $('#cssmenu ul li.has-sub ul').show();
    $('#cssmenu li.has-sub ul').show();
});

My Example Code: http://jsfiddle.net/5abCc/

Thanks!

Add an open class to your active ul like,

HTML

<li class='has-sub open'><a href='javascript:;'><span>Company</span></a>
   <ul>
      <li><a href='javascript:;'><span>About</span></a></li>
      <li class='last'><a href='javascript:;'><span>Location</span></a></li>
   </ul>
</li>

SCRIPT

$(document).ready( function() {
   $('#cssmenu li.has-sub.active ul').show();
});

To add click event on span try this,

$('#cssmenu > ul > li > a .cnt').click(function() {
       // ----------------^ span counter element
    $('#cssmenu li').removeClass('active');
    $(this).closest('li').addClass('active');   
    var checkElement = $(this).parent('a').next();
    if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideUp('normal');
    }
    if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#cssmenu ul ul:visible').slideUp('normal');
        checkElement.slideDown('normal');
    }
    if($(this).closest('li').find('ul').children().length == 0) {
        return true;
    } else {
        return false;   
    }       
});

Demo

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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM