Переключение панели навигации: активная проблема ⇐ Php

[Anonymous]

В настоящее время я столкнулся с проблемой с желаемыми эффектами CSS. Проблема в том, что у меня есть переключатель навигационной панели черного цвета. Когда я нажимаю на переключатель панели навигации, я хочу, чтобы при ее расширении цвет фона панели навигации был красным, а затем, когда я нажимаю на него и убираю панель навигации, цвет снова меняется с красного на черный. Но он становится красным только после того, как я нажимаю на него, а когда я отпускаю, он снова становится черным. Сценарий, который мне предложили, приведен ниже.Втягивание/развертывание изображения:



Полная панель навигации:
[img]https://i.sstatic .net/TMFRw5GJ.png[/img]

PHP Laravel

Код: Выделить всё

Toggle navigation




[url=/]
[img]images/logos/smsGuru_logo.png[/img]
                        height="60px" alt="sms guru" title="cheap sms">[/url]





[b]                [b]

[list]
[*]
[url=https://wa.me/60123240066?text=I+would+like+to+inquire+about]+6012 3240 066[/url][/b]


[*][url=https://sms.360.my/developers/v3.0][i]                                class="fa fa-file">[/i] API[/url]
[*][url=https://sms.360.my/register][i]                                class="fa fa-unlock">[/i] Register[/url]

[*][url=https://sms.360.my/login][i]                                class="fa fa-lock">[/i]
Login[/url]
[/list]

Файл custom.css ниже

Код: Выделить всё

 .header_style_01 {
background-color: #2d3032;
display: block;
left: 0;
padding: 15px 20px 5px !important;
position: relative;
right: 0;
top: 0;
width: 100%;
z-index: 111;
}

.navbar-default .navbar-toggle {
border-color: #2d3032;
color: #fff !important;
background-color: #2d3032 !important;
}
.navbar-default .navbar-toggle:active{
background-color: #DD0000 !important;
border-color: #DD0000;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
border-color: transparent;
}

Скрипт в index.blade.php

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function() {
var button = document.getElementById('toggle-button');
var navbarCollapse = document.getElementById('navbar');

// Toggle 'active' class when the button is clicked
button.addEventListener('click', function() {
// Use a timeout to wait for the collapse animation to complete
setTimeout(function() {
if (navbarCollapse.classList.contains('in') || navbarCollapse.classList.contains('show')) {
button.classList.add('active');
} else {
button.classList.remove('active');
}
}, 350); // Adjust delay to match the Bootstrap collapse animation duration
});

// Add 'active' class when the navbar is shown
navbarCollapse.addEventListener('shown.bs.collapse', function() {
button.classList.add('active');
});

// Remove 'active' class when the navbar is hidden
navbarCollapse.addEventListener('hidden.bs.collapse', function() {
button.classList.remove('active');
});
});
.

Я поместил этот код в index.blade.php так же, как и код. Но это все равно не сработает.
Сначала я использовал переключатель навигации: наведите курсор. Но эффект таков: когда я нажимаю на него, он остается красным. Но если я снова нажму на переключатель, он останется красным, и он останется красным, пока я не нажму на область за пределами панели навигации.

Подробнее здесь: https://stackoverflow.com/questions/788 ... tive-issue