0

Есть на странице несколько тегов . Их можно описать в css как li ul.children Нужно сделать спойлеры перед ними. Есть мысль реализовать задумку следующим образом.

Из этого:

<ul>
  <li class="cat-item cat-item-26"><a href="26">Title</a> (9) </li>
  <ul class="children">
    <li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
    <li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
    <li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
  </ul>
  <li class="cat-item cat-item-36"><a href="36">Title</a> (9) </li>
  <ul class="children">
    <li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
    <li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
    <li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
  </ul>
</ul>

Нужно сделать что то типа такого:

<ul>
  <li class="cat-item cat-item-26"><a href="26">Title</a> (9) </li>
  <div class="toogle-children-1"></div>
  <ul class="children-1">
    <li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
    <li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
    <li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
  </ul>
  <li class="cat-item cat-item-36"><a href="36">Title</a> (9) </li>
  <div class="toogle-children-2"></div>
  <ul class="children-2">
    <li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
    <li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
    <li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
  </ul>
</ul>

Перед каждым из них добавить div (он будет таким себе переключателем).

При нажатии на который в ul добавим высоту , а при повторном нажатии на этот же div наш ul снова станет

А теперь главный вопрос: как такое сделать на js или jquery? ))) Причем для нескольких на одной и той же странице.

3 ответа 3

2

Так Вы хотели?

$('ul').each(function(){
if($(this).children('ul').length){
$(this).find('ul').before('<span class="toogle-children-1">span, а не div внутри ul, nigga</span>');
}

});
ul li{color:red}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
    <li class="cat-item cat-item-26"><a href="26">Title</a> (9) </li>
    <ul class="children">
        <li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
        <li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
        <li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
    </ul>
    <li class="cat-item cat-item-36"><a href="36">Title</a> (9) </li>
    <ul class="children">
        <li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
        <li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
        <li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
    </ul>
</ul>

1
  • О! Почти оно ) Спасибо добрый человек Теперь осталось придумать как оживить переключатели
    – Юра
    Commented 15 мая 2021 в 17:24
1

Обратите внимание на верстку, т.к. я ее переделал.

Внутри ul должны быть только li, а уже внутри li может быть что угодно, в том числе и другие ul списки.

let showButtons = document.querySelectorAll('.toggle_additional-list');
let tempEl;


for (const showButton of showButtons) {
  showButton.addEventListener('click', (ev) => {
    if (tempEl) {
      tempEl.classList.remove('show');
    }
    let el = ev.target;
    tempEl = el.nextElementSibling;
    tempEl.classList.add('show');
  });
}
.toggle_additional-list~ul {
  display: none
}

.show {
  display: block !important;
}
<ul>
  <li class="cat-item cat-item-26">
    <a href="26">Title</a> (9) <span class="toggle_additional-list"> ▼ </span>
    <ul class="additional-list dchildren-1">
      <li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
      <li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
      <li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
    </ul>
  </li>
  <li class="cat-item cat-item-36">
    <a href="36">Title</a> (9) <span class="toggle_additional-list"> ▼ </span>
    <ul class="additional-list children-2">
      <li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
      <li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
      <li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
    </ul>
  </li>
</ul>

2
  • Решение классное, но верстку я переделать не смогу
    – Юра
    Commented 15 мая 2021 в 17:17
  • А нет, все таки могу верстку изменить ) Спасибо. Я использовал оба решения. Верстку сделал кодом @Майкл Миллер. А Ваш код использовал для оживления этой верстки
    – Юра
    Commented 15 мая 2021 в 18:12
1

Спасибо Вам за помощь. Объединил два ответа, получилось то что нужно. Пример выкладываю здесь, может кому нибудь пригодится

    <html><head>
    <style>
        .spoiler-cat {
            position: absolute;
            left: 1.6rem;
            width: 12px;
            margin-top: -1.35em;
            color: rgb(0 0 0 / 50%);
            cursor: help;
            background: aqua;
        }
        
        .spoiler-cat~ul {
          display: none
        }
        .spoiler-cat-show {
          display: block !important;
        }
    </style>
</head>
<body>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<ul>
    <li class="cat-item cat-item-26"><a href="26">Title</a> (9)
        <ul class="children">
            <li class="cat-item cat-item-27"><a href="27">Title</a> (3) </li>
            <li class="cat-item cat-item-28"><a href="28">Title</a> (3) </li>
            <li class="cat-item cat-item-29"><a href="29">Title</a> (3) </li>
        </ul>
    </li>
    <li class="cat-item cat-item-36"><a href="36">Title</a> (9)
        <ul class="children">
            <li class="cat-item cat-item-37"><a href="37">Title</a> (3) </li>
            <li class="cat-item cat-item-38"><a href="38">Title</a> (3) </li>
            <li class="cat-item cat-item-39"><a href="39">Title</a> (3) </li>
        </ul>
    </li>
</ul>


    <script type="text/javascript">
        $('li').each(function(){
            if($(this).children('ul').length){
                $(this).find('ul.children').before('<div class="spoiler-cat">+</div>');
            }
        });
        
        let showButtons = document.querySelectorAll('.spoiler-cat');
        let tempEl;
        for (const showButton of showButtons) {
          showButton.addEventListener('click', (ev) => {
            if (tempEl) {
              tempEl.classList.remove('spoiler-cat-show');
            }
            let el = ev.target;
            tempEl = el.nextElementSibling;
            tempEl.classList.add('spoiler-cat-show');
          });
        }
    </script>

</body></html>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.