jqueryメニューで動的コンテンツがフェードインします

Question

親カテゴリと子カテゴリのメニューがあります。各サブカテゴリのすべてのコンテンツを含む親カテゴリごとに別のページがあります。コンテンツは、ユーザーがメニュー項目をクリックするまで隠されます。ユーザーがサブカテゴリをクリックすると、メインコンテンツがフェードインします。問題は次のとおりです。ユーザーが現在のページではなく、別の親カテゴリのサブカテゴリをクリックすると機能しません。現在表示されているページのサブカテゴリの内容のみが表示されます。私はこれがはっきりしたことを望む。これには最適なソリューションは何ですか？

これが私のメニューです：

<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"); 
}); 
}); 

Answer 1

はあなたのサブカテゴリ実際のリンク（とにかく、使いやすさのために良い）してください。例：

<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="philosophy"になります。 JavaScriptが無効になっていても、リンクはユーザーをドキュメント内の正確な場所に移動させます。

今、潜在的に難しい部分です。 JavaScript（アクティブなカテゴリのサブカテゴリ）と新しいページ（他のサブカテゴリだけを読み込む）によって処理されるリンクを区別する方法が必要です。現在のカテゴリに「アクティブ」などのクラスを追加することをお勧めします。これはサーバー側で達成するのには簡単です。次に、セレクタを次のように変更するだけです。

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

他のセレクタでリンスして繰り返します。これにより、クリックの動作は現在のページのサブカテゴリにのみ適用されます。他のすべてが他のカテゴリページを読み込みます。また、リストアイテムはリンクされているので、クリックハンドラの下部にreturn false;を追加します。それは

最後のピースは、ページのロード時に、表示するサブカテゴリを検出するための方法です、そのhref属性にURLを読み込むからブラウザを防ぐことができます：基本的な考えです

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

を。他のエフェクトや必要な処理を含めるようにコードを修正します。基本的には、「URLにアンカーリンクがある場合は、そのIDを持つ要素を表示する」ということだけです。