浏览到目标常见问题主题

Question

我不知道该怎么解释，但我会尽力...

我将常见问题解答存储在数据库中，并将它们输出到视图中。它们按顶级主题和子主题（即实际问题）组织。当 FAQ 页面首次呈现时，只有顶级 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>

这是应用到它的 CSS（使用 .LESS 库）：

#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>