Показать скрытый тег Div с другой страницы

Question

Я пытаюсь ссылаться на страницу часто задаваемых вопросов, включающих все включенное на разных страницах. Ответы содержатся в тегах, вложенных в линейную позицию неупорядоченного списка, размещенного по категориям.

На странице часто задаваемых вопросов есть следующие категории:

1. Практический экзамен медсестры
2. Онлайн обновление
3. Тренировочные часы

и т.п.

При практическом экзамене медсестры существуют подкатегории, предметы, с вопросами ниже в тегах, которые расширяют 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>

Answer 1

Если Div, который вы пытаетесь расширить, находится в других Divs, которые обрушиваются, вам придется расширить контейнерные DIV, прежде чем расширить Divs для детей, чтобы они могли показать. Так что вам нужно хотя бы вызвать что -то вроде функции переключения в коде головы, например,

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 для вызова или какую -то другую функцию для его расширения.

РЕДАКТИРОВАТЬ

Одним из способов достижения того, что вы пытаетесь сделать, в Pure 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';
}