jquery - 浏览到目标FAQ主题

我不确定该如何解释，但我会尽力而为...

我将FAQ存储在数据库中，并将其输出到视图中。它们按顶级主题和子主题（它们是实际问题）进行组织。首次显示“常见问题解答”页面时，仅显示顶级常见问题解答。当用户单击其中之一时，其子级将显示在其下方（滑动效果）。然后，当用户单击问题时，将显示答案。

我在网站上散布着许多链接，这些链接指向FAQ中的某些主题。我需要能够重定向到该特定问题，并且该问题及其答案也应显示出来。我尝试了/FAQ#id-of-question，但是仅定向到FAQ页面，而问题及其答案却未显示出来。所以，我有什么可以做的？

这是我的代码：

<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%; }
                    }
}

最佳答案

您需要做的就是修改单击逻辑以处理页面加载，然后从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>

关于jquery - 浏览到目标FAQ主题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6014895/