Question

我已经搜索了我的问题的答案高低，但似乎找不到有用的东西。我是jquery和代码的新手，所以请耐心等待。我有一个带嵌套链接的垂直手风琴导航菜单。到目前为止，我提供了一个小提琴。不要介意'shop'和'about'旁边的方块。这是我到目前为止所做的工作：

当我点击手风琴中的父菜单时，它会打开一个父母的活动状态突出显示，就像我想要它和+ 标志转入 - 标志。当我将鼠标悬停在子链接上时相同的父菜单，它也像父母一样突出显示。完美。
当我点击子链接并加载新页面时，手风琴孩子所在的菜单仍然打开，表明我是哪个菜单目前在。到目前为止一直很好。

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

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

FIDDLE

我希望这一切都有意义，我已经提供了足够的信息。我尝试了很多东西，包括改变我的整个手风琴菜单。但没有任何效果。请帮忙！

代码：

$(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

如果你使用哈希来改变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;

  }


}

通过本指南，您可以实现这一目标。

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

1 个答案: