尝试使用jQuery选择一个无序列表中的列表项和另一个无序列表

Question

我遇到的问题是，单击嵌套列表项与单击列表下面列出的点亮项目相同。 因此，如果我尝试使用console.log，则使用jscript单击列表项，然后单击列表中的嵌套列表项之一，则将获得两个console.logs。 第一个是您单击的实际列表项对象，第二个日志将是包含无序列表的列表项。 有什么办法解决这个问题？

基本上，我希望用户能够单击具有下拉列表的列表项，并且页面将被加载以及使下拉列表下拉。 当您单击下拉列表中的任何嵌套列表项时，将从该链接加载内容，然后隐藏下拉菜单。

请任何帮助解决此问题将非常有帮助。

这是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>

这是脚本：

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

有两种方法可以做到这一点：

1. 异步加载您的内容，以便菜单以当前状态停留在页面上

要么

2. 将菜单状态保存为Cookie，以便在页面重新加载时可以将其恢复