У меня есть цикл forEach, который просматривает мою базу данных Mongo. Все работает как надо, кроме одной из моих функций CSS, которые взяты из файла jQuery. Это работает для первого элемента в моем цикле, а затем ничего для остальных.
Я проверил, в порядке ли мои CDN начальной загрузки, popper и jQuery.
Проверено правильность __dirname.
Я переместил петли на странице, чтобы увидеть, что-то изменилось.
HTML / EJS
<%include partials/header%>
<div class="col-lg-10 col-md-6">
<%news.forEach(function(news) { %>
<div id="accordion" class="accordion">
<%news.forEach(function(news) {%>
<div class="line">
<div id="headingOne<%=news._id%>">
<h5 class="mb-3"> <%=news.title%>
<button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne<%=news._id%>"
href="#collapseOne<%news._id%>" aria-expanded="true" type="button" aria-controls="<%=news._id%>">
<img class="cross" src="images/cross.png">
</button>
</h5>
</div>
<div id="collapseOne<%=news._id%>" class="navbar-collapse collapse show" aria-labelledby="headingOne<%=news._id%>"
data-parent="#accordion">
<div id="info">
<img src="<%=news.image%>">
<p><%=news.description%></p>
</div>
</div>
</div>
<%})%>
</div>
<%})%>
</div>
</div>
</div>
<script type="text/javascript" src="../javascripts/news-slider.js"></script>
<%include partials/footer%>
JQuery
$(function () {
$('.collapse').on('hidden.bs.collapse', function (e) {
var $card = $(this).closest('.line');
$('html,body').animate({
scrollTop: $card.offset().top
}, 1000);
});
})
//Not working//
$(function () {
$('.cross').on('click', function () {
if ($('#info').css('opacity') == 1) $('#info').css('opacity', 0);
else $('#info').css('opacity', 1);
});
})
CSS
.navbar-collapse {
transition: height 1s, opacity 0.3s;
}
#info {
opacity: 1;
-webkit-transition: all .5s ease-in-out;
-moz-transition: all .5s ease-in-out;
-ms-transition: all .5s ease-in-out;
-o-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}