jQuery slideToggle () не работает? - PullRequest
Новая
       6

jQuery slideToggle () не работает?

0 голосов
/ 06 июня 2018

Я пытаюсь заставить div (.panel div) появляться или исчезать при нажатии div прямо над ним (.accordion divs).

Я пробовал несколько вариантов для кода jQueryно ни один из них не сработал для меня.

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

HTML: 

<div class="accordion">Section 4</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 5</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 6</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

CSS: 

.panel {
    display: block;
}

JS 

var acc = document.getElementsByClassName("accordion");
$(".panel").hide();

for (var i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        console.log("test");
        $(this).next(".panel").slideToggle();
    });
}

Имея то, что у меня есть, я могу скрыть элементы .panel, и журнал консоли test печатается правильно,но как только я нажимаю на соответствующий .accordion div, я получаю следующее сообщение об ошибке:

TypeError: $ (...). next (...). slideToggle не является функцией

Ответы [ 2 ]

0 голосов
/ 06 июня 2018

Я думаю, это то, что вы хотите?При каждом щелчке вы сначала перемещаете все .panels вверх, а затем перемещаете панель, по которой щелкнули, вниз: 

var acc = document.getElementsByClassName("accordion");
$(".panel").hide();

for (var i = 0; i < acc.length; i++) {
    acc[i].addEventListener("click", function() {
        console.log("test");
        $('.panel').slideUp();
        $(this).next(".panel").slideToggle();
    });
}
.panel {
    display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">Section 4</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 5</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 6</div>
<div class="panel">
    <p>Lorem ipsum...</p>
</div>
0 голосов
/ 06 июня 2018

Не следует смешивать как чистый JavaScript, так и jQuery.Используйте этот способ: 

$(".panel").hide();

$(".accordion").click(function () {
  if ($(this).next(".panel").is("visible"))
    $(this).next(".panel").slideToggle();
  else {
    $(".panel:visible").slideUp();
    $(this).next(".panel").slideToggle();
  }
});

Фрагмент 

$(function() {
  $(".panel").hide();

  $(".accordion").click(function() {
    if ($(this).next(".panel").is("visible"))
      $(this).next(".panel").slideToggle();
    else {
      $(".panel:visible").slideUp();
      $(this).next(".panel").slideToggle();
    }
  });
});
.panel {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">Section 4</div>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 5</div>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

<div class="accordion">Section 6</div>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

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

...