1

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

常见问题页面具有以下类别：

  1. 实习护士考试
  2. 在线续订
  3. 练习时间

等等

在 Practical Nurse Exam 下，有子类别、科目，以及下面在展开 onClick 的标签中的问题。（例如考试日、考试成绩等）

假设我在另一个名为“注册”的页面上，并且有一个指向考试结果常见问题解答的链接。

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

我读过这个线程，但它对我不起作用。请帮忙！代码如下：

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

1 回答 1

1

如果您尝试展开的 div 位于其他折叠的 div 中，则必须先展开容器 div，然后再展开子 div 以显示它们。所以你至少需要在头部代码中调用类似切换函数的东西，例如

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';
}
于 2013-11-07T21:51:28.380 回答