jQuery根據頁面切換活動菜單項

我有下面的代碼，這是工作的罰款：

$('#menu .container ul li:not(:first-child)').fadeOut() 

$('#menu .container ul li:first-child').click(function() { 
    $(this).siblings().fadeToggle(); 
})

我只是隱藏所有的菜單項，清理導航位。我現在想要做的是讓瀏覽器檢測你正在查看的部分（即如果你在最新作品下查看Magda）並自動顯示該部分。我不太清楚如何去做這件事。也許檢測到的URL，然後找到它的所有兄弟姐妹加載時的網址爲#menu .container和.show()？任何人都可以幫助這個嗎？

來源

2011-02-10 steve

$("#menu a").each(function() { 
    if($(this).attr('href') == window.location.href) { 
    //Show the menu. 
    } 
});

你必須填寫實際顯示菜單中的位，但。讓我知道你是否也需要幫助。

我在Chrome Javascript控制檯中簡單測試了一下，它似乎找到了正確的元素。不過，請務必跨多個瀏覽器對其進行測試。我認爲這也依賴於每個鏈接中的href元素是「完整」網址，包括http://和域名。如果它們是相對鏈接（例如/home），則需要使用window.location.pathname而不是window.location.href。

來源

2011-02-10 16:57:33

這個很好用。我添加了`$（this）.parent（）。parent（）。children（）。show（）;`使菜單功能正常工作，並且它是活的！非常感謝。我認爲所有其他的建議也可以起作用，但這是最容易做到的，而不需要重新編碼所有內容。謝謝。 – steve 2011-02-10 17:11:46

您可以使用PHP爲元素添加某個類，然後使用jQuery查找元素並顯示它。

例如：

<ul> 
<li class="<?=($page_1 == $selected_page ? "active" : "");?>">Page 1</li> 
<li class="<?=($page_2 == $selected_page ? "active" : "");?>">Page 2</li> 
<li class="<?=($page_3 == $selected_page ? "active" : "");?>">Page 3</li> 
</ul>

用jQuery

然後：

$('#menu .container ul li.active:first-child').click(function() { 
    $(this).siblings().fadeToggle(); 
})

如果菜單被自動打印用PHP，它可以被容易地實現。

其他辦法 - 不隱藏在第一時間選擇的菜單，所以它會立即展開:)

來源

2011-02-10 16:54:27

我看到你在每一頁上的第n節都有一個body類。如果你可以申請一個類來每個父菜單項的UL，你就可以顯示或隱藏使用子菜單

.menuparent ul { display: none; } 
.bodyclass .menuparent ul { display: block; }

- 編輯 -

剛剛看到，它不是編碼通過這種方式：

<ul> 
    <li class="menuparent">menu parent 
    <ul> 
     <li>menu sub 1</li> 
     <li>menu sub 2</li> 
    </ul> 
    </li> 
</ul>

這將是我的工作答案需要。如果可以的話，可能是更好的代碼編寫方式，因爲它是父子菜單系統。

來源

2011-02-10 16:58:04

jQuery根據頁面切換活動菜單項

回答

相關問題