如何在手风琴导航菜单中设置当前页面子链接及其父链接的样式

Question

我到处寻找问题的答案，但似乎找不到有效的答案。我是jquery和代码的新手，所以请耐心等待。我有一个带有嵌套链接的垂直手风琴导航菜单。到目前为止，我提供了一把小提琴。不要介意"shop"one_answers"about"旁边的方块。以下是我迄今为止所做的工作：

1. 当我点击手风琴中的父菜单时，它会打开一个活动状态，其中父项高亮显示（如我所需），并且+标志变为-标志。当我将鼠标悬停在中的子链接上时与父菜单相同，它也会像父菜单一样高亮显示。完美
2. 当我点击一个子链接并加载新页面时，手风琴孩子所在的菜单仍然打开，以指示我所在的菜单目前在。到目前为止还不错

但这是我遇到问题的地方。。。

1. 当我点击一个子链接并加载新页面时，手风琴菜单保持打开，但没有突出显示的活动状态。我想要当前子链接与其父元素都保留突出显示以准确显示我所在的页面。

   小提琴

我希望这一切都有意义，我已经提供了足够的信息。我尝试了很多方法，包括改变我的手风琴菜单。但什么都没用。请帮忙！

代码：

$(document).ready(function () {
    $('#cssmenu > ul > li ul').each(function (index, e) {
        var count = $(e).find('li').length;
        var content = '<span class="cnt">' + count + '</span>';
        $(e).closest('li').children('a').append(content);
    });
    $('#cssmenu ul ul li:odd').addClass('odd');
    $('#cssmenu ul ul li:even').addClass('even');
    $('#cssmenu > ul > li > a').click(function () {
        $('#cssmenu li').removeClass('active');
        $(this).closest('li').addClass('active');
        var checkElement = $(this).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;
        }
    });
});
$(document).ready(function () {
    if (window.location.href.indexOf("#shop-nikki-lexi") > -1) {
        $('.drop-link-1').closest(".sub-level-1").css("display", "block");
    }
});
$(document).ready(function () {
    if (window.location.href.indexOf("#about-nikki-lexi") > -1) {
        $('.drop-link-2').closest(".sub-level-2").css("display", "block");
    }
});

/* Base Styles */
 * {
    margin: 0;
    padding: 0;
}
#cssmenu, #cssmenu ul, #cssmenu li, #cssmenu a {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    font-weight: normal;
    text-decoration: none;
    line-height: 1;
    font-family:"open-sans";
    font-size: 15px;
    position: relative;
    text-transform:uppercase;
    text-align:left;
}
#cssmenu a {
    line-height: 1.3;
}
#cssmenu {
    width: auto;
    padding: 20px 0px;
}
#cssmenu > ul > li > a:link {
    padding-right: 40px;
    display: block;
    background: #000000;
    color: #f1f1f1;
    border-bottom:none;
    text-transform: uppercase;
}
#cssmenu > ul > li > a:visited {
    text-decoration: none;
    color:#f1f1f1;
}
#cssmenu > ul > li > a:focus {
    text-decoration: none;
    color:#f1f1f1;
}
#cssmenu > ul > li > a:hover {
    text-decoration: none;
    color:#808080;
}
#cssmenu > ul > li > a:active {
    text-decoration: none;
    color:#808080;
}
#cssmenu > ul > li > a > span {
    background: #000000;
    padding: 0;
    display: block;
    font-size: 15px;
    font-weight: 400;
}
#cssmenu > ul > li.active {
    border-bottom: none;
}
#cssmenu > ul > li.active > a {
    color: #808080;
}
#cssmenu > ul > li.has-sub.active > a {
    color:#808080;
}
#cssmenu > ul > li.active > a span {
    background: #000000;
}
#cssmenu span.cnt {
    display:none;
    position: absolute;
    top: 8px;
    right: 15px;
    padding: 0;
    margin: 0;
    background: none;
}
/* Sub menu */
 #cssmenu ul ul {
    display: none;
}
#cssmenu ul ul li {
    border: none;
    border-top: 0;
}
#cssmenu ul ul a {
    padding: 2px 0 2px 22px;
    display: block;
    color: #f1f1f1;
    font-size: 12px;
    background-color:#000;
}
#cssmenu ul ul {
    padding:5px 0px;
}
#cssmenu ul ul a:hover {
    color: #808080;
}
#cssmenu ul ul li.odd {
    background: #f4f4f4;
}
#cssmenu ul ul li.even {
    background: #fff;
}
#shop:before {
    content:"e708 ";
    font-size:13px;
    line-height:1;
    font-family:'icomoon';
}
#cssmenu > ul > li.active > a span#shop:before {
    content:"e707 ";
    font-size:13px;
    line-height:1;
    font-family:'icomoon';
}
#cssmenu > ul > li.has-sub {
    margin-left:-2px;
}
.current-menu:before {
    content:"e707 ";
    font-size:13px;
    line-height:1;
    font-family:'icomoon';
    color:#808080;
}
#cssmenu > ul > li > a.selected {
    color:#808080;
}
#copy {
    font-size:10px;
    opacity:.4;
    position:absolute;
    bottom:0;
    text-align:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div id='cssmenu'>
    <ul>
        <li><a href='/'><span>Home</span></a>
        </li>
        <li class='has-sub'><a href='#shop-nikki-lexi'><span id="shop">Shop</span></a>
            <ul class="sub-level-1" style="display:none;">
                <li><a class="drop-link-1" href='/products/#shop-nikki-lexi'><span>All Products</span></a>
                </li>
                <li><a class="drop-link-1" href='/category/apparel-tops/#shop-nikki-lexi'><span>Tops</span></a>
                </li>
                <li class='last'><a class="drop-link-1" href='/category/apparel-bottoms/#shop-nikki-lexi'><span>Bottoms</span></a>
                </li>
            </ul>
        </li>
        <li class='has-sub'><a href='#about-nikki-lexi'><span id="shop">About</span></a>
            <ul class="sub-level-2" style="display:none;">
                <li><a class="drop-link-2" href='/the-story/#about-nikki-lexi'><span>The Story</span></a>
                </li>
                <li class='last'><a class="drop-link-2" href='/faq/#about-nikki-lexi'><span>FAQ</span></a>
                </li>
            </ul>
        </li>
        <li class='last'><a href='/contact-nikki-lexi'><span>Contact</span></a>
        </li>
    </ul>
</div>

Answer 1

因为您在一个新页面上，所以只需将该类作为对应于该页面的列表项的html的一部分。不需要脚本来设置初始类。为了简单起见，

//Shop All Products Page
    <ul>
        <li class="active">All Products</li>
        <li>Tops</li>
        <li>Bottoms</li>
    </ul>
//Tops Page
    <ul>
        <li>All Products</li>
        <li class="active">Tops</li>
        <li>Bottoms</li>
    </ul>

Answer 2

如果你使用哈希来更改URL，你可以做出这样的东西：

window.onhashchange = activateMenu; // when url changes but not the page
(function() { activateMenu() })(); // when the DOM is loaded (document ready)
function activateMenu() {
  // read the hash (hash example: #work)
  var hashes = window.location.hash;
  // hide all submenus, here you must to define the correct selectors
  $('.all-your-menus').hide();
  //switch the submenu to show:
  switch(hashes) {
     case "#shop":
       $('.your-menu-selector-shop').show();
      break;
     case "#work":
       $('.your-menu-selector-work').show();
      break;
     default:
       // by default you can show one or hide all, you can choose :)
       $('.your-menu-selector-default').show();
      break;
  }

}

有了这个指南，你就可以做到这一点。