Question

我不确定我将如何解释这一点，但我会尽我所能......

我将FAQ存储在数据库中，然后将它们输出到视图中。它们由顶级主题和子主题（这是实际问题）组织。当FAQ页面首次呈现时，只有顶级常见问题解答可见。当用户点击其中一个时，其子项将显示在其下方（幻灯片效果）。然后，当用户点击问题时，答案就会显示出来。

我在网站上散布了许多链接，指向常见问题解答中的某些主题。我需要能够重定向到该特定问题，它也应该显示其答案。我试过/FAQ#id-of-question，但只针对常见问题解答页面和问题＆amp;它的答案没有显示出来......那么我能做些什么才能做到这一点？

这是我的代码：

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

浏览目标常见问题主题

1 个答案: