瀏覽到目標常見問題主題

Question

我不知道我將如何解釋這一點，但我會盡我所能...

我有常見問題存儲在數據庫中，我輸出它們到視圖。它們由頂級主題和子主題組成（這是實際問題）。常見問題頁面首次呈現時，只有頂級常見問題解答可見。當用戶點擊其中一個時，它的孩子出現在它下面（幻燈片效果）。然後，當用戶點擊問題時，答案就會顯示出來。

我在網站上散佈了很多指向FAQ中某些主題的鏈接。我需要能夠重定向到這個特定的問題，它也應該顯示出它的答案。我嘗試了/FAQ#id-of-question，但只針對常見問題頁面和問題&其答案沒有顯示出來......那麼，我能做些什麼來完成這項工作？

這裏是我的代碼：

<div id="faqPageWrapper"> 
    <ul id="faqTopLevel"> 
     @foreach (var parent in Model.Parents) 
     { 
      <li class="faqParentNode"> 
       <h3 id="@string.Format("parentFAQ-{0}", parent.Id)" class="faqParentTitle">@parent.Title <span class="arrowIcon downArrow"></span></h3> 
       <ul class="faqChildLevel"> 
        @foreach (var child in parent.Children) 
        { 
         <li class="faqChildNode"> 
          <h3 id="@string.Format("topic-{0}", child.Id)" class="faqChildTitle">@child.Title <span class="arrowIcon upArrow"></span></h3> 
          <p class="faqChildText" style="display:none;">@child.Text</p> 
         </li> 
        } 
       </ul> 
      </li> 
     } 
    </ul> 
</div> 


<script type="text/javascript"> 
    $(function() { 
     var topLevelLink = $('.faqParentTitle'); 
     topLevelLink.click(function() { 
      var child = $(this).parent().find('ul.faqChildLevel'); 
      child.slideToggle(); 
      $('.arrowIcon', topLevelLink).toggleClass('upArrow'); 

      var questions = child.find('.faqChildTitle').click(function() { 
       $(this).parent().find('p.faqChildText').toggle(); 
       $(this).find('.arrowIcon').toggle(); 
      }); 
     }); 
    }); 
</script> 

這是適用於它（使用.LESS庫）的CSS：

#faqPageWrapper 
{ width:680px; position:relative; top:80px; display:block; .arrowIcon { display:none; } 
    li.faqParentNode { position:relative; width:100%; min-height:25px; background:rgba(255,255,255, 0.6); filter:alpha(opacity=60); .rounded_corners(5px); 
        .box_shadow(3px); margin-bottom:20px; padding:25px; 
        .faqParentTitle { font-size:42px; color:@darkPurple; text-decoration:none; cursor:pointer; position:relative; top:0; left:25px; height:50px; display:block;} 
        .faqParentTitle:hover { text-decoration:underline; .arrowIcon { display:inline-block; } } 
        } 

    .faqChildLevel { position:relative; display:block; left:80px; display:none; width:90%; margin-top:15px; 
        li { margin-bottom: 15px; h3 { color:@mainGreen; font-size:16px; text-decoration:underline; cursor:pointer; font-weight:bold; } } 
        p { padding:20px; background-color:@lightBrown; font-size:12px; color:Black; margin-top:10px; position:relative; left:10px; width:90%; } 
        } 
} 

Answer 1

所有你需要做的就是修改你的點擊邏輯工作在頁面加載時，從URL中讀取片段以確定默認情況下應該展開哪個問題。

事情是這樣的：

HTML

<div id="faqPageWrapper"> 
    <ul id="faqTopLevel"> 
     @foreach (var parent in Model.Parents) 
     { 
      <li class="faqParentNode" id="@uniqueID"> 
       ... 
      </li> 
     } 
    </ul> 
</div> 

jQuery的

<script type="text/javascript"> 
    $(function() { 
     // On load 
     if (window.location.hash && $("LI" + window.location.hash").length != 0) { 
      var activeQuestion = $("LI" + window.location.hash"); 
      showChildrenOf(activeQuestion); 
     } 

     // On click 
     var topLevelLink = $('.faqParentTitle'); 
     topLevelLink.click(function() {  
      showChildrenOf(this); 
     }); 
    }); 

    function showChildrenOf(element) { 
     var child = $(element).parent().find('ul.faqChildLevel'); 
     child.slideToggle(); 
     $('.arrowIcon', topLevelLink).toggleClass('upArrow'); 

     var questions = child.find('.faqChildTitle').click(function() { 
      $(this).parent().find('p.faqChildText').toggle(); 
      $(this).find('.arrowIcon').toggle(); 
     }); 
    }; 
</script>