Javascript в Drupal: this.nextElementSibling возвращается в Drupal NULL, но работает в простом HTML файл

Question

У меня есть следующий яваскрипт метод, который пытается Переключите свернуть или развернуть на участке HTML:

<script> 
    var acc = document.getElementsByClassName("accordion"); 
    var i; 

    for (i = 0; i < acc.length; i++) { 
     acc[i].onclick = function() { 
      this.classList.toggle("active"); 
      window.alert(this); 
      this.nextElementSibling.classList.toggle("show"); 
     } 
    } 
</script> 

Когда я запустить то же точное содержимое HTML в статическом HTML-файле, свернуть, развернуть работает нормально. (Window.alert выше показывает [object HTMLButtonElement] как в Drupal, так и в статическом HTML). Но при использовании одного и того же кода HTML/JS/CSS, испеченного на моей странице Drupal, this.nextElementSibling возвращает NULL, поэтому toggle ("show") не может быть вызван.

Кто-нибудь знает, почему в Drupal этот метод woudl возвращает NULL, но все работает отлично в статическом HTML-файле.

Вот полное содержание всей статической HTML-скрипт (отлично работает):

<style> 
button.accordion { 
    background-color: #eee; 
    color: #444; 
    cursor: pointer; 
    padding: 18px; 
    width: 100%; 
    border: none; 
    text-align: left; 
    outline: none; 
    font-size: 15px; 
    transition: 0.4s; 
} 

button.accordion.active, button.accordion:hover { 
    background-color: #ddd; 
} 

div.panel { 
    padding: 0 18px; 
    background-color: white; 
    max-height: 0; 
    overflow: hidden; 
    transition: 0.6s ease-in-out; 
    opacity: 0; 
} 

div.panel.show { 
    opacity: 1; 
    max-height: 500px; 
} 
</style> 

<h2>Animated Accordion</h2> 

<button class="accordion">Section 1</button> 
<div class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 

<button class="accordion">Section 2</button> 
<div class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 

<button class="accordion">Section 3</button> 
<div id="foo" class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 

<script> 
    var acc = document.getElementsByClassName("accordion"); 
    var i; 

    for (i = 0; i < acc.length; i++) { 
     acc[i].onclick = function() { 
      this.classList.toggle("active"); 
      window.alert(this); 
      this.nextElementSibling.classList.toggle("show"); 
     } 
    } 
</script> 

UPDATE Проблема была из-за Drupal инъекционного < р> теги вокруг кнопки <> теги автоматически. Я прибегал к обмотке каждой кнопки <> с < div>, теперь Drupal оставляет ее в покое и не добавляет лишних тегов, поэтому следующая логика брата работает нормально. Окончательный код:

<!-- DRUPAL will wrap <button> tags with <p> tags if <button> tags are not enclosed with some sort of parent tag. Therefore, divs around them are needed. --> 
<div> 
<button class="accordion">Section 1</button> 
<div class="panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
</div> 

<div> 
<button class="accordion">Section 2</button> 
<div class="panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
</div> 

<div> 
<button class="accordion">Section 3</button> 
<div class="panel">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> 
</div> 

Answer 1

Я проверил структуру HTML после страницы заканчивает рендеринга, и обнаружил, что Dru pal вводит < p> теги вокруг моей кнопки <> теги.

Оригинальный HTML я был при условии:

<button class="accordion">Section 1</button> 
<div class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 

<button class="accordion">Section 2</button> 
<div class="panel"> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> 
</div> 

Но вот то, что выходит из инспекторе HTML:

(Обратите внимание на < р> теги вокруг кнопок). Поэтому кажется, что мне просто нужно изменить свою логику выбора, чтобы просверлить прошлое < p>, а затем вернуться в следующий соседний div. Тем не менее, это хакерское решение. Я бы предпочел, чтобы Drupal не смешивался с HTML, который я пишу ... Возможно, есть возможность отключить этот тип форматирования. Возможно, он преобразует мои строки в теги < p>. Я также попробую написать HTML в Drupal, не используя символы новой строки, чтобы узнать, помогает ли это.

Answer 2

Скорее всего, проблема происходит потому, что код работает до самой страницы в качестве готового рендеринга.

Вы можете установить точку останова в этой строке (или использовать инструкцию debugger), а затем изучить DOM.

Answer 3

Заботьтесь о слове это на JavaScript, то это будет возвращать данные, основанные на Вашей области, чтобы не потерять ссылку, это общее решение для хранения этой Ссылки в переменная с именем себя, как это:

var _self= this; 
//then access later to the reference 
_self.foo() 

Try, что решение, Best