嘗試使用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，以便在頁面重新加載時可以將其恢復