Я хочу нацелить дочерний элемент на следующий родительский брат без использования класса или ID

Question

Вот HTML (который появляется в нескольких местах, но каждый вид должен рассматриваться по-разному):

<div class="foot-nav-heading">Click me!</div>
    <div class="textwidget">
       <ul class="quick-link accordion-content">
          <li>Test</li>
       </ul>
</div>

Вот код JavaScript:

var accordions = document.getElementsByClassName("foot-nav-heading");
  for (var i = 0; i < accordions.length; i++) {
     accordions[i].onclick = function() {
       this.classList.toggle('is-open');

   var content = this.nextElementSibling;
   if (content.style.maxHeight) {
   // accordion is currently open, so close it
 content.style.maxHeight = null;
   } else {
  // accordion is currently closed, so open it
 content.style.maxHeight = content.scrollHeight + "px";
   }
 }
}

Я хочу нацелить«ul» внутри элемента «div.textwidget».Я пробовал

var content = this.next.(".text-widget").find(".accordion-content")

Но это не работает.

Заранее спасибо!

Answer 1

Делегирование события

• Обернуть все аккордеоны в тег (main#main)
• Зарегистрировать событие клика для этого родительского тега.
• Теперь любой щелчок по родительскому тегу обнаруживается вложенными тегами.
• Используя e.target, вы можете точно определить, по какому тегу щелкнули.
• Этот метод может поддерживать неограниченное количество тегов, используя один EventListener

---

XY Проблема

Относительно цели ОП:

"Я хочу нацелить дочерний элемент в следующем родительском элементе брата без использования класса или идентификатора."

Учитывая фактический макет, каждый "кнопка "может нацелить nextElementSibling добавить / удалить класс и при этом иметь возможность влиять на дочернего элемента nextElementSibling с помощью селектора CSS.Короче говоря, это потраченные впустую усилия и время на нацеливание тега, вложенного в родительский элемент, к которому проще получить доступ и, в свою очередь, облегчает доступ к его потомкам через CSS.

Макет

<button>CLICK</button>

<section class='accordion'>
  <ul class='list'>
    <li>ITEM</li>
  </ul>
</section>

CSS

/* By default this hides .list */
.accordion {
  max-height: 0;
  opacity: 0;
  font-size: 0;
  transition: all 0.3s;
  border: 3px outset #666;
}

/* This class is added/removed when <button> is clicked */
/* .open is nextElementSibling and anytime .open is added, it's child .list 
   benefits from it as well
 */
.open,
.open .list {
  height: auto;
  max-height: 1000px;
  opacity: 1;
  font-size: 16px;
  transition: all 0.3s;
  border: 3px outset #666;
}

---

Демо

Подробности прокомментированы в демо

// Reference the parent tag (main#main)
var main = document.getElementById('main');

/*
Register <main> to the click event...
toggleText() is the callback function
*/
main.addEventListener('click', toggleText);

// Pass the Event Object (e)
function toggleText(e) {
  // Reference e.target -- clicked tag (header.head) 
  var tgt = e.target;
  /*
  Reference the next adjacent sibling of e.target (article.text)
  */
  var actTxt = tgt.nextElementSibling;
  // Collect all article.text into a NodeList
  var txts = document.querySelectorAll('.text');
  // if clicked tag has class .head...
  if (tgt.classList.contains('head')) {
    /*
    On each loop...
    if the current article.text is NOT e.target's .text sibling...
    ...remove class .open.
    Toggle .open class on e.target's .text sibling.
    */
    for (let i = 0; i < txts.length; i++) {
      if (txts[i] !== actTxt) {
        txts[i].classList.remove('open');
      }
    }
    actTxt.classList.toggle('open');
  }
}

.head {
  cursor: pointer;
  border: 3px outset #666;
  text-align:center;
  padding: 3px 5px;
}

.text {
  max-height: 0;
  opacity: 0;
  font-size: 0;
  transition: all 0.3s;
  border: 3px outset #666;
}

.open,
.open .menu {
  height: auto;
  max-height: 1000px;
  opacity: 1;
  font-size: 16px;
  transition: all 0.3s;
  border: 3px outset #666;
}

<main id='main'>

  <header class="head">MENU</header>
  <article class="text">
    <ul class="menu">
      <li>ITEM 1</li>
      <li>ITEM 2</li>
      <li>ITEM 3</li>
    </ul>
  </article>

  <header class="head">MENU</header>
  <article class="text">
    <ul class="menu">
      <li>ITEM 1</li>
      <li>ITEM 2</li>
      <li>ITEM 3</li>
    </ul>
  </article>

  <header class="head">MENU</header>
  <article class="text">
    <ul class="menu">
      <li>ITEM 1</li>
      <li>ITEM 2</li>
      <li>ITEM 3</li>
    </ul>
  </article>

</main>

Answer 2

Ваш код работает!Проблема не в том, что брат, а в том, что вы не можете установить высоту CSS равной нулю

var accordions = document.getElementsByClassName("foot-nav-heading");
  for (var i = 0; i < accordions.length; i++) {
     accordions[i].onclick = function() {
       this.classList.toggle('is-open');
   var content = this.nextElementSibling;

   if (content.style.maxHeight != "0px") {
   // accordion is currently open, so close it
 content.style.maxHeight = "0px";
   } else {
  // accordion is currently closed, so open it
 content.style.maxHeight = "200px";
   }
 }
}

<div class="foot-nav-heading">Click me!</div>
    <div class="textwidget">
       <ul class="quick-link accordion-content">
          <li>Test</li>
       </ul>
</div>

Here is the javascript code:

<div class="foot-nav-heading">Click me!</div>
    <div class="textwidget">
       <ul class="quick-link accordion-content">
          <li>Test</li>
       </ul>
</div>

Here is the javascript code:

РЕДАКТИРОВАТЬ :
То, что вы пробовали с вашим кодом, это получить nextSibling .Но у вас могут быть дополнительные текстовые узлы с возвратом каретки. Попробуйте этот фрагмент:

document.querySelectorAll(".textwidget")[0].childNodes.forEach(function(el){
  console.log(el.nodeName,el.nodeType);
});

<div class="foot-nav-heading">Click me!</div>
    <div class="textwidget">
    <ul class="quick-link accordion-content">
          <li>Test</li>
       </ul>
</div>

Поэтому попытка нацеливания напрямую была бы рискованной (в вашем примере вы можете получить то, что вы хотите с помощью content.childNodes[1], но это опасно, если вы не знаетекак написан HTML. Это может быть content.childNodes[0] без возврата каретки).Поэтому лучший вариант - это проанализировать childNodes и установить переменную или элементы push в массиве, когда они полностью выполнят условие.в вашем случае:

var ul;
content.forEach(function(el){
  if (el.nodeName === 'UL') ul = el;
}

или создайте массив из списка узлов для фильтрации нужного узла:

var ul = Array.from(document.querySelectorAll(".textwidget")[0].childNodes).filter(function(el) {if(el.nodeName == 'UL') return el});

// or use es6 features
// var ul = [...document.querySelectorAll(".textwidget")[0].childNodes].filter(e => e.nodeName == 'UL');

console.log(ul[0]);

<div class="foot-nav-heading">Click me!</div>
    <div class="textwidget">
       <ul class="quick-link accordion-content">
          <li>Test</li>
       </ul>
</div>