Trying to select a list item within an unordered list with another unordered list using jquery

Question

The problem i am running into is that clicking on a nested list item is the same as clicking the lit item that list was listed under. so if i were to try a console.log the list item clicked on using jscript and i clicked on one of the nested list items with in a list i would get two console.logs. the first one being the actual list item object you clicked on and the second log would be the list item holding the unordered list. Any way to get around this?

Basically i want the user to be able to click on the list item that has a drop-down and the page gets loaded as well as makes the drop-down list pull down. when you click on any of the nested list items in the drop-down the content gets loaded from that link and then the drop-down menu gets hidden.

Please any help on getting around this would be very helpful.

Here is HTML

<div class="menu">
    <div class="toggle-btn visible-xs"><i class="fa fa-sort-desc fa-2x"></i></div>
        <ul>
            <li><a class="active-menu" attr="Retirementplans2" href="">Retirement Plans</a></li>
            <li class="exty"><a  class="nact subm" attr="nadart4kplans" href="">NADART 401(k) Plans<span class="caret"></span></a>
            <ul class="sub-menu">
                <li><a class="nact sub" attr="investmentChoicePlans" href="">Investment Choice Plans</a></li>
                <li><a class="nact sub" attr="openArchitecturePlans" href="">Open Architecture Plans</a></li>
                <li><a class="nact sub" attr="nadartsub20plans" href="">Sub20 Plans</a></li>
                <li><a class="nact sub" attr="executiveplansolutions" href="">Executive Plan Solutions</a></li>
                </ul></li>
                <li class="exty"><a class="nact subm" attr="PlanDesign" href="">Plan Design<span class="caret"></span></a>
                <ul class="sub-menu">
                    <li><a class="nact sub" attr="flexiblefreestructure" href="">Flexible Fee Structure</a></li>
                    <li><a class="nact sub" attr="EmployerMatchingOptions" href="">Employer Matching Options</a></li>
                    <li><a class="nact sub" attr="AutomaticEnrollment" href="">Automatic Enrollments</a></li>
                    <li><a class="nact sub" attr="Roth4kOption" href="">Roth 401(k) Option</a></li>
                    <li><a class="nact sub" attr="rai" href="">Retirement Accumulation Insurance</a></li>
                    </ul></li>
                    <li><a class="nact" attr="Fiduciaryservices" href="">Feduciary Services</a></li>
                    <li><a class="nact" attr="Understanding4kFees" href="">Understanding 401(k) Plans</a></li>
                    <li><a class="nact" attr="Makinga4kDecision" href="">Making 401(k) Decision</a></li>
                    <li><a class="nact" attr="MakingTheTransitionEasy" href="">Making the Transition Easy</a></li>
                </ul>
            </div>

Here is the script:

var submenu = function(){
var tglBtn = $(".toggle-btn"),
    mc = $(".main-content"),
    subnav = $(".sub-menu"),
    subItem = $(".menu ul").find('li');
if(tglBtn.css('display') === 'block'){
    $(".menu ul").find('li.nact').slideToggle();
}
tglBtn.on('click', function(){
    $(".menu ul").find('li.nact').slideToggle();
});
if($(".toggle-btn").css('display') === 'block'){
    subItem.on('click', function(e){
        e.preventDefault();
        $(".menu ul").find('li.nact').hide();
    });
}
if(subnav.length >= 1){
    subnav.find('li').hide();
}
var submenuNavigation = {
    ajaxCall: function(e){
        e.preventDefault();
        var $this = $(this),
            pageName = $this.attr('attr').toLowerCase(),
            item = '_'+pageName+'.html',
            subMenu = $this.find('ul').length;
            $this.parent().find('li').removeClass('actLink');
            console.log(item);
            if($this.hasClass("subm")){
                $this.next('ul').find('li').show();
                $this.next('ul').find('a').show();
            }
            $.ajax('partials/'+item, {
                url:location.pathname+pageName+' - NADART',
                success: function(response){
                    mc.html(response);
                    $this.addClass('actLink');
                    location.hash = pageName;
                },
                error: function(){
                    alert("Page not available");
                },
                beforeSend: function(){
                    mc.addClass('.loading');
                },
                complete: function(){
                    mc.removeClass('.loading');
                }
            });//END OF AJAX CALL
    },
    subnav: function(){
        //subnav.find('li').toggle();
    }
};

//EVENTS
subItem.on('click', 'a', submenuNavigation.ajaxCall);
subnav.on('click', 'a', submenuNavigation.subnav);
};


$(document).ready(function(){
    submenu();
    mainItem();
});

Answer 1

There are 2 ways to do this:

1. load your content asynchronously so that the menu stays on the page in it's current state

or

2. save your menu state to a cookie so that it can be restored when the page reloads