метод toggle() jquery

Рейтинг: 0Ответов: 2Опубликовано: 14.08.2025

Помогите разобраться. Есть код html в файле index

<h3 id="pop">Расчет стоимости проката мотоциклов:</h3>

Также есть код в myscript.js:

$('#pop').toggle(function() {
   $('#pop').css({'color':'red'});
},
function() {
    $('#pop').css({'color':'blue'});
});

Как видно из кода, при щелчке по надписи (Расчет стоимости проката мотоциклов) надпись должна менять свой цвет с красного на голубой и наоборот. Но проблема в том, что надпись исчезает при обновлении страницы, и нажимать некуда (в файле css на #pop ничего не прописывал). При нажатии на f12 показывается что моя надпись является не блочной display=none. Пробовал в css сделать display=block для #pop, но в проверке по f12 всё равно пишет display=none.

В другом проекте с этим кодом таких проблем не возникает (надпись не пропадает, и при щелчках меняет цвет). В чём проблема? Да и ещё если задаю в css для #pop display:none; надпись появляется, но сразу голубая и на щелчки не реагирует.

css html jquery
Источник: Stack Overflow на русском

Ответы

▲ 1

jQuery метод .toggle() позволяет отобразить или скрыть выбранные элементы. Если элемент изначально отображается, то он будет скрыт, если элемент скрыт, то он будет отображен.

Источник

На самом деле вам нужен этот простой код:

let highlighted = false // сохраняем состояние подсветки
$('#pop').on('click', () => {
    if (highlighted) { // при клике проверяем состояние
        $('#pop').css({'color':'red'});
    }
    else {
        $('#pop').css({'color':'green'});
    }

    highlighted = !highlighted // переключаем состояние
})
▲ 1

Ваш код работает в версии 1.7

$('#pop').toggle(
function(){$('#pop').css({'color':'red'})},
function(){$('#pop').css({'color':'blue'})}
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<h3 id="pop">Расчет убытков от игнорирования документации</h3>

В версии 1.9 toggle был удален

В новых версиях его заменил оноименный эффект, который просто переключает видимость элемента.