Question posted in 
I am a beginner in web development. I need some help. The dropdown menu is not expanding. CSS and JS are connected correctly. What could be the reason?
I checked the CSS/JS classes and connected files. Everything seems to be correct, I even used GPT, but no results. 🙁 I can provide other project files if needed. Here is the code from the main file layout.html.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{% block title %}Головна{% endblock %}</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="{% static 'main/css/main.css' %}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.10.1/main.min.css">
</head>
<body>
<button class="btn btn-primary" id="sidebarToggle">
<i class="fas fa-bars"></i>
</button>
<div class="d-flex">
<aside class="flex-shrink-0 p-3 bg-dark text-white sidebar" id="sidebar">
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
<img src="{% static 'main/img/2.png' %}" alt="Logo" class="small-logo">
</a>
<hr>
<ul class="nav nav-pills flex-column mb-auto">
<li class="nav-item">
<a href="{% url 'layout' %}" class="nav-link text-white {% if request.resolver_match.url_name == 'layout' %}active{% endif %}" aria-current="page">
<i class="fas fa-heart"></i> Головна
</a>
</li>
<li>
<a href="{% url 'staff' %}" class="nav-link text-white {% if request.resolver_match.url_name == 'staff' %}active{% endif %}">
<i class="fas fa-users"></i> Особовий склад
</a>
</li>
<li>
<a href="{% url 'calendar' %}" class="nav-link text-white {% if request.resolver_match.url_name == 'duty' %}active{% endif %}">
<i class="fas fa-list"></i> Подати наряд
</a>
</li>
<li>
<a href="{% url 'profile' %}" class="nav-link text-white {% if request.resolver_match.url_name == 'profile' %}active{% endif %}">
<i class="fas fa-user"></i> Профіль
</a>
</li>
<li>
<a href="{% url 'calendar' %}" class="nav-link text-white {% if request.resolver_match.url_name == 'calendar' %}active{% endif %}">
<i class="fas fa-calendar"></i> Календар
</a>
</li>
</ul>
<li class="nav-item">
<a class="nav-link dropdown-toggle text-white" href="#" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
</ul>
</aside>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/5.10.1/main.min.js"></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
<script src='https://cdn.jsdelivr.net/npm/@fullcalendar/[email protected]/index.global.min.js'></script>
<script>
document.getElementById('sidebarToggle').addEventListener('click', function() {
document.getElementById('sidebar').classList.toggle('active');
this.classList.toggle('active');
});
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendar');
if (calendarEl) {
var calendar = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
locale: 'uk',
editable: true,
selectable: true,
events: '/get_duties/', // Завантаження нарядів з сервера
select: function(info) {
var dutyDateInput = document.getElementById('dutyDate');
dutyDateInput.value = info.startStr;
var dutyFormModal = new bootstrap.Modal(document.getElementById('dutyFormModal'));
dutyFormModal.show();
calendar.unselect();
},
eventClick: function(info) {
if (confirm('Ви впевнені, що хочете видалити цю подію?')) {
$.ajax({
type: 'POST',
url: '{% url "delete_duty" %}',
data: {
'id': info.event.id,
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function(response) {
if (response.status === 'success') {
info.event.remove();
} else {
alert('Сталася помилка при видаленні наряду.');
}
},
error: function(response) {
alert('Сталася помилка при видаленні наряду.');
}
});
}
}
});
calendar.render();
}
$('#dutyForm').on('submit', function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(response) {
$('#dutyFormModal').modal('hide');
calendar.refetchEvents();
},
error: function(response) {
var errors = response.responseJSON.errors;
var errorMessage = 'Сталася помилка при подачі наряду:n';
for (var field in errors) {
errorMessage += field + ': ' + errors[field].join(', ') + 'n';
}
alert(errorMessage);
}
});
});
});
</script>
</body>
</html>
2
Answers
The reason is that this file no longer exist at this web location, you can check it yourself (404 not found error):
https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css
correct code