jQuery的動態內容菜單褪色

我有一個菜單與父母和孩子的分類。每個父類別都有一個單獨的頁面，其中包含子類別的所有內容。內容隱藏，直到用戶點擊菜單項。當用戶點擊子類別時，主要內容會淡入。問題如下：如果用戶單擊其他父類別的子類別（而不是他們當前所在的頁面），則不起作用。它只顯示他們所在頁面的子類別的內容。我希望這很清楚。什麼是最好的解決方案？jQuery的動態內容菜單褪色

這是我的菜單：

<div id="sidebar"> 
<ul> 
    <li class="main"> 
     <a href="real_estate.php">Real Estate </a> 
     <ul class="sub current" id="sub_real_estate"> 
      <li class="sub_1">Consulting Services</li> 
      <li class="sub_2"> Investment</li> 
      <li class="sub_3"> Property Management</li> 
      <li class="sub_4"> Development</li> 
     </ul> 
    </li> 
    <li class="main"> 
     <a href="investment.php">Investment</a> 
     <ul class="sub" id="sub_investment"> 
      <li class="sub_1">Philosophy</li> 
      <li class="sub_1">Criteria</li> 
     </ul> 
    </li> 
</ul> 
</div>

這是jQuery的：

$(document).ready(function() { 
$(".main").hover(function() { 
    $(".sub", this).slideDown('slow'); 
}, 
function() { 
    $(".sub", this).not(".current").slideUp('slow'); 
}); 

$(".sub li").click(function() { 
    var menuID = $(this).attr("class"); 
    var substr = menuID.split('_'); 
    $(".sub li").removeClass("highlight"); 
    $(this).addClass("highlight"); 
    $("#main_content").removeClass("active"); 
    $(".active").hide(); 
    $("div#real_" + substr[1]).addClass("active"); 
    $("div#real_" + substr[1]).fadeIn("slow"); 
}); 
});

來源

2011-07-13 MG1

這很不清楚。 –

讓你的子類別的實際鏈接（更好的可用性，反正）。例如：

<li class="main"> 
    <a href="investment.php">Investment</a> 
    <ul class="sub" id="sub_investment"> 
     <li class="sub_1"><a href="investment.php#philosophy">Philosophy</a></li> 
     <li class="sub_1"><a href="investment.php#critera">Criteria</a></li> 
    </ul> 
</li>

分配適當的這些部分ID的。換句話說，「哲學」部分的容器將獲得id="philosophy"。然後，即使禁用JavaScript，鏈接也會將用戶帶到文檔中的正確位置。

現在，爲潛在棘手的部分。您需要區分應該由JavaScript處理的鏈接（活動類別的子類別）和應該只加載新頁面（其他子類別）的鏈接。我建議在當前類別中添加一個類如'active'的類，這很容易在服務器端完成。那麼你只需要像這樣修改選擇器：

$(".active .sub li").click(function() {

沖洗並重復使用任何其他選擇器。這樣，點擊行爲將只應用於當前頁面中的子類別;一切都會加載其他類別頁面。另外，由於列表項目現在是鏈接，因此將return false;添加到您的點擊處理程序的底部。這將防止瀏覽器在其href屬性加載URL，

的最後一塊是檢測在頁面加載顯示其子類別的方式：

if (location.hash) { 
    $(location.hash).show(); 
}

這是基本的想法。修改這段代碼以包含任何其他需要的效果或處理。它所做的基本上是說「如果URL中存在錨鏈接，則使用該ID顯示該元素。」

來源

2011-07-13 21:37:59

jQuery的動態內容菜單褪色

回答

相關問題