jQuery下拉菜單。 頁面標記無法正常工作-或我希望如何

Question

導航欄的外觀與我自己的東西並不完全相同，因為我有背景圖片等-但是導航欄本身可以完美地工作，即使在jsfiddle上它看起來有點時髦。

我遇到的問題是我在頁面上時的視覺標記，這在jsFiddle上無法很好地顯示或根本無法顯示，因為我無法單擊其他頁面。 我能夠使視覺標記器在我單擊的特定頁面上起作用，但是只有在那次特定的單擊中，我想要實現的視覺標記是無論您身處何等深處頁（ul li a或ul li> ul li a還是ul li> ul li> ul li a）。 例如。

（需要查看Jsfiddle才能理解我的意思）如果我將鼠標懸停在“ Web”上，則會出現一個下拉菜單。 然后，我繼續進入“ Web-215”，那里還有一個下拉菜單，我決定我要導航到“ jQuery”頁面。

當前正在發生的事情是：當我單擊“ jQuery”時，該單項的ID為“當前”。 這改變了外觀。 但這只是針對單個項目。

我想要它做的是：如果我只單擊“ Web”，它將添加屬性到“ Web”，但是如果我單擊“ Web> Web-215”或該文件夾中的任何內容，則它將突出顯示Web AND網絡215。 而且-如果我單擊“ jQuery”，它是“ Web-215”的第三級，則所有這三個屬性都將選擇“當前”屬性。 我應該選擇其他路徑或鏈接，也應該遵循這些規則。

我不確定該在哪里使用它，但是這里是實時示例： http : //jsfiddle.net/knvH4/2/

這就是我認為問題出在jsfiddle的javascript中的第16行

function youAreHere() {
var pathName = $(location).attr('pathname');
var curPage = pathName.substring(pathName.lastIndexOf('/') + 1);
$('a').each(function () {
    if ($(this).attr('href') == curPage) {
        $(this).attr('id', 'current');
    } else if (curPage == '') {
        $('a:first').attr('id', 'current');
    }
}); //END function

我需要做什么才能使所有屬性都具有“當前”屬性（或id），而不僅僅是該屬性。

Answer 1

首先要注意的是，頁面上相同ID的元素絕不能超過一個。 改用一個類。

如果您成功突出顯示了當前頁面項目，但不是它的父項，則可以使用jQuery的closest()方法並向其中添加“當前”類（這意味着更改css以反映類而不是id好）。 我尚未測試以下代碼，但我認為它將有所幫助：

if ($(this).attr('href') == curPage) {
    $(this).addClass('current');

    //if inside child menu, highlight parent anchor
    if($(this).closest('ul').siblings('a').length){
        $(this).closest('ul').siblings('a').addClass('current');

        //if inside grandchild menu, highlight grandparent anchor as well
        if($(this).closest('ul').siblings('a').closest('ul').siblings('a').length){
            $(this).closest('ul').siblings('a').closest('ul').siblings('a').addClass('current');
        }
    }
} else if (curPage == '') {
    $('a:first').addClass('current');
}

理想情況下，您應該向每個ul添加id ，而不是向上遍歷dom。

Answer 2

這是我想出的解決方案-感謝您給我的意見！

function youAreHere() {
var pathName = $(location).attr('pathname');
var curPage = pathName.substring(pathName.lastIndexOf('/')+1, pathName.lastIndexOf('.'));
$('a').each(function() {
    var href = $(this).attr('href');
    var path = href.substring(0, href.lastIndexOf('.'));
    if(curPage.indexOf(path) !== -1) {
        $(this).addClass('current');
    } else if (curPage == '') {
        $('a:first').addClass('current');
    }
});//END function