別のページから隠されたDivタグを表示します

Question

さまざまなページから包括的なFAQページにリンクしようとしています。回答はタグに含まれており、カテゴリごとに収容されていない順序付けられたリストの行にネストされています。

FAQページには次のカテゴリがあります。

1. 実践的な看護師試験
2. オンライン更新
3. 練習時間

等

実用的な看護師試験では、サブカテゴリ、被験者があり、オンクリックを拡張するタグに以下の質問があります。 （例などの試験日、試験結果など）

登録と呼ばれる別のページに載っていて、試験結果のFAQへのリンクがあるとしましょう。

ページにリンクして、アンカーまたは試験結果にハッシュタグを含めることができますが、サブカテゴリを拡張しません。

もう読んだ これ スレッドですが、それは私にとってはうまくいきませんでした。助けてください！コードは以下にあります：

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

そして、これがリンクとすべての包括的なFAQページと同じスクリプト構文を含む他のページの本文です。これは単なるテストであり、それはまさにそれが言うことではありません：

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

Answer 1

拡張しようとしている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を把握する必要があるため、拡張するためにコンテナdivを把握する必要があるため、ほぼ完全なソリューションではありません。

編集

純粋なJSで、あなたがやろうとしていることを達成する1つの方法は、次のことをすることです。

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