jQuery тумблер вообще не срабатывает - PullRequest
Новая
       1

jQuery тумблер вообще не срабатывает

0 голосов
/ 03 апреля 2020

DEMO

Почему переключатель jquery ничего не вызывает, чтобы свернуть описание? Я попытался переместить ссылку CDN JS в заголовке - ничего, переместился внутрь и снаружи тега body, ничего не работает. Это работает только на JSFIDDLE

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

HTML - 

<div class="parent-container">
<ul class="faq">
<li>
  <h3 class="question">SVRS Header 1
    <div class="plus-minus-toggle collapsed"></div>
  </h3>
  <div class="answer">Donec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis <br><br>
    ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
    fermentum risus. Phasellus venenatis ultricies dignissim.</div>
</li>
<li>
  <h3 class="question">SVRS Header 2
    <div class="plus-minus-toggle collapsed"></div>
  </h3>
  <div class="answer">onec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis <br><br>
    ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
    fermentum risus. Phasellus venenatis ultricies dignissim.</div>
</li>
 <li>
  <h3 class="question">SVRS Header 3
    <div class="plus-minus-toggle collapsed"></div>
  </h3>
  <div class="answer">onec vitae tellus risus. Aenean sed fermentum risus. Phasellus venenatis <br><br>
    ultricies dignissim. Nunc ante lectus, accumsan non porta at. Donec vitae tellus risus. Aenean sed 
    fermentum risus. Phasellus venenatis ultricies dignissim.</div>
</li>
</ul>
</div>

JS Переключатель - 

$('.faq li .question').click(function () {
$(this).find('.plus-minus-toggle').toggleClass('collapsed');
$(this).parent().toggleClass('active');
});

CSS 

.parent-container {
padding: 0 20px 0 20px;
max-width: 800px;
width: 100%;
}

.faq {
 list-style: none;
 padding-left: 40px;
 padding-right: 20px;
}

.faq li.active .answer {
max-height: 275px !important;
transition: max-height 0.5s ease, padding-bottom 0.5s ease;
}

.faq li.active .question {
color: #808080;
transition: color 0.5s ease;
}

.faq .answer {
color: #090909;
font-family: serif;
font-size: 16px;
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease, padding-bottom 0.5s ease;
}

.faq .plus-minus-toggle {
cursor: pointer;
height: 20px;
position: absolute;
width: 20px;
left: -40px;
top: 50%;
z-index: 2;
}

.faq .plus-minus-toggle:before, .faq .plus-minus-toggle:after {
background: #000;
content: "";
height: 5px;
left: 0;
position: absolute;
top: 0;
width: 20px;
transition: transform 500ms ease;
}

.faq .plus-minus-toggle:after {
transform-origin: center;
}

.faq .plus-minus-toggle.collapsed:after {
transform: rotate(90deg);
}

.faq .plus-minus-toggle.collapsed:before {
transform: rotate(180deg);
}

.faq .question {
color: #090909;
font-family: sans-serif;
font-size: 20px;
font-weight: 800;
text-transform: uppercase;
position: relative;
cursor: pointer;
padding: 5px 0;
transition: color 0.5s ease;
}

@media screen and (max-width: 767px) {
.faq .question {
font-size: 18px;
}

}

1 Ответ

2 голосов
/ 03 апреля 2020

Ответ можно получить через консоль: Uncaught ReferenceError: $ is not defined

Эта ошибка возникает из-за того, что вы используете jQuery синтаксис / функции ДО того, как загрузите библиотеку jQuery.

Визуализация в минимальной форме - это что-то вроде этого: 

console.log(a);
let a = "test";

Для запуска вашего сайта вы ДОЛЖНЫ размещать тег загрузки скрипта jQuery ВСЕГДА в разделе заголовка ДО вашего пользовательского кода.

Ваш сайт должен выглядеть как это: 

<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
//do jQuery here
</script>
</head>
...