Мой код:

<section class="section">
  <h2 class="section-tree-title">
    <a href="{{url}}">{{name}}</a>
  </h2>
  <ul class="article-list">
    <li class="article-list-item">
      <a href="{{url}}" class="article-list-link">{{title}}</a>
    </li>
  </ul>
</section>

<section class="section">
  <h2 class="section-tree-title">
    <a href="{{url}}">{{name}}</a>
  </h2>
  <ul class="article-list">
    <li class="article-list-item">
      <a href="{{url}}" class="article-list-link">{{title}}</a>
    </li>
    <li class="article-list-item">
      <a href="{{url}}" class="article-list-link">{{title}}</a>
    </li>
  </ul>
</section>

< Сильный > Вопрос

Приведенный выше код динамически генерируется в нашей системе zendesk, в которой перечислены разделы и любые статьи, которые они содержат.

Я знаю, что это очень странно, но цель этого - позволить пользователю получить доступ к любой отдельной статье напрямую.

Любая помощь и совет с благодарностью.

3
DannyC 20 Дек 2019 в 17:39

1 ответ

Лучший ответ

Я дал вашим разделам пользовательский класс my-section, поэтому этот код не мешает чему-либо еще, что у вас есть.

const sections = document.querySelectorAll('.my-section');

sections.forEach(section => {
    const sec_header = section.children[0];
    const sec_ul = section.children[1];
    
    if(sec_ul.children.length === 1) {
       // if we are here, it means there is only 1 "li"
       const only_li = sec_ul.children[0];
       sec_header.children[0].href = only_li.children[0].href;
       sec_ul.hidden = true;
    }
});
<section class="section my-section">
  <h2 class="section-tree-title">
    <a href="header-1-url">{{name}}</a>
  </h2>
  <ul class="article-list">
    <li class="article-list-item">
      <a href="li-1.1-url" class="article-list-link">{{title}}</a>
    </li>
  </ul>
</section>

<section class="section my-section">
  <h2 class="section-tree-title">
    <a href="header-2-url">{{name}}</a>
  </h2>
  <ul class="article-list">
    <li class="article-list-item">
      <a href="li-2.1-url" class="article-list-link">{{title}}</a>
    </li>
    <li class="article-list-item">
      <a href="li-2.2-url" class="article-list-link">{{title}}</a>
    </li>
  </ul>
</section>
3
Iraklis Gkougkousis 20 Дек 2019 в 14:51