Question

我正在尝试从各个页面链接到一个包罗万象的常见问题解答页面。答案包含在标签中，嵌套在按类别划分的无序列表的行项目中。

常见问题解答页面包含以下类别：

实用护士考试
在线续订
练习时间

等

在实际护士考试中，有子类别，科目，以及在扩展onClick上的标签中的问题。（例如考试日，考试成绩等）

假设我在一个名为Registration的不同页面上，并且有一个指向考试结果常见问题解答的链接。

我可以链接到该页面并在主播或考试结果中包含主题标签，但它不会扩展子类别。

我已阅读this帖子，但它对我不起作用。请帮忙！代码如下：

<script type="text/javascript">
    function toggle(Info,pic) {
      var CState = document.getElementById(Info);
      CState.style.display = (CState.style.display != 'block') ? 'block' : 'none';
    }

    window.onload = function() {
        var hash = window.location.hash; // would be "#div1" or something
        if(hash != "") {
            var id = hash.substr(1); // get rid of #
            document.getElementById(id).style.display = 'block';
        }
    }

    </script>

<style type="text/css">
 .FAQ { cursor:hand; cursor:pointer; }
 .FAA { display:none;
        padding-left:20px;
        text-indent:-20px; }
 #FAQlist li { list-style-type: none; }
 #FAQlist ul { margin-left:0px; }
 headingOne{ font-family:Arial, Helvetica, sans-serif; color:#66BBFF; font-size:20px; font-weight:bold;}

</style>

这是身体（无论如何都是它的一部分）

<headingOne class="FAQ" onClick="toggle('CPNRE', this)">PRACTICAL NURSE EXAM</headingOne>
<div class="FAA" id="CPNRE">
<h3><a name="applying">Applying to write the CPNRE</a></h3>
<ul id="FAQlist" style="width:450px;">
    <li class="FAQ">
        <p onclick="toggle('faq1',this)">
            <strong>Q: How much does it cost to write the exam?</strong></p>
        <div class="FAA" id="faq1">
      <b>A.</b> In 2013, the cost for the first exam writing is $600.00 which includes the interim license fee. See <a href="https://www.clpnbc.org/What-is-an-LPN/Becoming-an-LPN/Canadian-Practical-Nurse-Registration-Examination/Fees-and-Deadlines.aspx"> fee schedule</a>.</div>
        <hr />
    </li>

这是包含链接和其他脚本语法的另一个页面的正文。这只是一个测试，这不完全是它所说的：

<a onclick="toggle('CPNRE', this)" href="file:///S|/Designs/Web stuff/FAQ all inclusive.html#applying"> click here</a>

Answer 1

如果您尝试展开的div位于折叠的其他div中，则必须在展开子div之前展开容器div，以便显示它们。因此，您至少需要在头代码中调用类似toggle函数的内容，例如

window.onload = function() {
        var hash = window.location.hash; // would be "#div1" or something
        if(hash != "") {
            toggle('CPNRE', this);/*this is an example the CPNRE value needs to be figured out*/
            var id = hash.substr(1); // get rid of #
            document.getElementById(id).style.display = 'block';
        }
    }

这大概不是一个完整的解决方案，因为你需要找出容器div来调用切换或其他一些功能来扩展它。

修改

在纯粹的js中实现你想要做的事情的一种方法是做以下事情，

if(hash != "") { var id = hash.substr(1); // get rid of # document.getElementById(id).style.display = 'block'; document.getElementById(id).parentNode.parentNode.parentNode.style.display = 'block'; document.getElementById(id).parentNode.parentNode.style.display = 'block'; document.getElementById(id).parentNode.style.display = 'block'; document.getElementById(id).style.display='block'; }

但这与您在问题中提供的具体布局有关。

更好，更通用的解决方案是迭代父项，直到找到基于类值的特定父项，例如

<强> HTML

/*add class value like faq-section to each div section */ <div class="FAA faq-section" id="faq1">

<强> JS

.... if(hash != "") { var id= hash.substr(1); var pNode = document.getElementById(id).parentNode; var endLoop=false; while(!endLoop){ if(pNode.className&&pNode.className.indexOf('faq-section')!=-1){ endLoop=true; }; pNode.style.display='block'; pNode=pNode.parentNode; } document.getElementById(id).style.display='block'; }

从另一个页面显示隐藏的div标签

1 个答案: