Блог

Главная - Вопросы по программированию - Преобразование jquery в javascript — аккордеон

Преобразование jquery в javascript — аккордеон

#javascript #jquery

Вопрос:

Мне трудно понять, как преобразовать следующий скрипт jquery в javascript. HTML:

 <ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Technically any number of nested elements</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Another nested element</a>
            <div class="inner">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
            </div>
          </li>
        </ul>
      </li>

      <li>Option 2</li>

      <li>Option 3</li>
    </ul>
  </li>
</ul>

Jquery:

     $('.toggle').click(function(e) {
        e.preventDefault();
        var $this = $(this);
        if ($this.next().hasClass('show')) {
            $this.next().removeClass('show');
            $this.next().slideUp(350);
        } else {
            $this.parent().parent().find('li .inner').removeClass('show');
            $this.parent().parent().find('li .inner').slideUp(350);
            $this.next().toggleClass('show');
            $this.next().slideToggle(350);
        }
    });

То, что я до сих пор преобразовал в Javascript:

 var toggle = document.querySelectorAll('.toggle');
for (let i = 0; i < toggle.length; i  ) {
  var toggleItem = toggle[i];
  toggleItem.addEventListener('click', function(e) {
    var nextSibling = e.target.nextElementSibling;
    if(nextSibling.classList.contains('show')){
      //NOT SURE HOW TO CONVERT
    } else { 
      //NOT SURE HOW TO CONVERT
    }

  }

Может кто-нибудь, пожалуйста, помочь мне с остальным? Я потратил слишком много времени, пытаясь разобраться в этом без посторонней помощи. Спасибо

НИЖЕ ПРИВЕДЕН ПОЛНЫЙ ФРАГМЕНТ КОДА:

 var toggle = document.querySelectorAll('.toggle');
for (let i = 0; i < toggle.length; i  ) {
  var toggleItem = toggle[i];
  toggleItem.addEventListener('click', function(e) {
    console.log("Target", e.target.nextElementSibling);
    var nextSibling = e.target.nextElementSibling;
    console.log("Target", nextSibling);
    if(nextSibling.classList.contains('show')){
      //NOT SURE HOW TO CONVERT
    } else { 
      //NOT SURE HOW TO CONVERT
    }

  });
  } 
 @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UNirkOUuhs.ttf) format('truetype');
}
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/pacifico/v17/FwZY7-Qmy14u9lezJ-6H6Mw.ttf) format('truetype');
}
* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}
a {
  text-decoration: none;
  color: inherit;
}
p {
  font-size: 1.1em;
  margin: 1em 0;
}
.description {
  margin: 1em auto 2.25em;
}
body {
  width: 40%;
  min-width: 300px;
  max-width: 400px;
  margin: 1.5em auto;
  color: #333;
}
h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}
ul {
  list-style: none;
  padding: 0;
}
ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}
ul .inner.show {
  /*display: block;*/
}
ul li {
  margin: 0.5em 0;
}
ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: 0.75em;
  border-radius: 0.15em;
  transition: background 0.3s ease;
}
ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
} 
 <ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Technically any number of nested elements</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Another nested element</a>
            <div class="inner">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
            </div>
          </li>
        </ul>
      </li>

      <li>Option 2</li>

      <li>Option 3</li>
    </ul>
  </li>
</ul>

Комментарии:

1. Взгляните на: codepen.io/codeorum/pen/JjGzMRQ или просто погуглите ванильный аккордеон js.

2. Спасибо вам за ваш ответ. Отправленный вами кодовый набор не имеет возможности открывать и закрывать подкатегории. Я бы просто погуглил чистый аккордеон js, но сейчас мне больше любопытно, как он будет выглядеть. Я полагаю, что это код, на котором был основан сценарий codepen.io/brenden/pen/Kwbpyj

Ответ №1:

Вы можете просто перебрать все .inner классы, используя forEach цикл, затем внутри этого удалить show класс из них, а затем toggle класс из nextSibling элемента.

Демонстрационный код :

 var toggle = document.querySelectorAll('.toggle');
for (let i = 0; i < toggle.length; i  ) {
  var toggleItem = toggle[i];
  toggleItem.addEventListener('click', function(e) {
    var nextSibling = e.target.nextElementSibling;
    if (nextSibling.classList.contains('show')) {
      nextSibling.classList.remove("show") //remove show class from next,,siblings
    } else {
      //loop through all inner element
      e.target.parentElement.parentElement.querySelectorAll("li .inner").forEach(function(el) {
        el.classList.remove("show") //remove show class
      })
      nextSibling.classList.toggle("show") //toggle
    }

  });
} 
 @font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UN_r8OUuhs.ttf) format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem8YaGs126MiZpBA-UFVZ0e.ttf) format('truetype');
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/opensans/v20/mem5YaGs126MiZpBA-UNirkOUuhs.ttf) format('truetype');
}

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/pacifico/v17/FwZY7-Qmy14u9lezJ-6H6Mw.ttf) format('truetype');
}

* {
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
  font-weight: 300;
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  font-size: 1.1em;
  margin: 1em 0;
}

.description {
  margin: 1em auto 2.25em;
}

body {
  width: 40%;
  min-width: 300px;
  max-width: 400px;
  margin: 1.5em auto;
  color: #333;
}

h1 {
  font-family: 'Pacifico', cursive;
  font-weight: 400;
  font-size: 2.5em;
}

ul {
  list-style: none;
  padding: 0;
}

ul .inner {
  padding-left: 1em;
  overflow: hidden;
  display: none;
}

ul .inner.show {
  display: block;
}

ul li {
  margin: 0.5em 0;
}

ul li a.toggle {
  width: 100%;
  display: block;
  background: rgba(0, 0, 0, 0.78);
  color: #fefefe;
  padding: 0.75em;
  border-radius: 0.15em;
  transition: background 0.3s ease;
}

ul li a.toggle:hover {
  background: rgba(0, 0, 0, 0.9);
} 
 <ul class="accordion">
  <li>
    <a class="toggle" href="javascript:void(0);">Item 1</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 2</a>
    <ul class="inner">
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>

  <li>
    <a class="toggle" href="javascript:void(0);">Item 3</a>
    <ul class="inner">
      <li>
        <a href="#" class="toggle">Technically any number of nested elements</a>
        <ul class="inner">
          <li>
            <a href="#" class="toggle">Another nested element</a>
            <div class="inner">
              <p>
                As long as the inner element has inner as one of its classes then it will be toggled.
              </p>
            </div>
          </li>
        </ul>
      </li>

      <li>Option 2</li>

      <li>Option 3</li>
    </ul>
  </li>
</ul>
Метки: