Скрипт выполняется только один раз по нажатию на кнопку, а потом, чтобы снова заработал после нажатия кнопки, нужно перезагружать всю страницу.
Вопрос: что нужно добавить в js, чтобы скрипт выполнялся всегда по нажатию на кнопку и без перезагрузки страницы?
Благодарю за внимание!
Сам скрипт:
$(document).ready(function() {
$(’.spoiler-body’).hide();
$(’.spoiler-title’).click(function() {
$(this).next().toggle(500)
$(’#sliders-womens-left’).css(‘width’, ‘74%’) // ширина левого слайдера
$('.spoiler-title').click(function() {
$('.spoiler-body').hide(500)
$('#sliders-womens-left').css('width', '100%') /*ширина левого слайдера*/
});
});
Поможет, если вы доделаете свой образец.
Да, свои изображения вы поставить не можете, но есть сервисы, подобные этому: https://placeholder.com/
Что касается css, то там есть правила для элементов, которых в html нету. Я не могу догадаться, как оно всё должно выглядеть.
… и центральный слайдер (#sliders-womens-left) уменьшается влево и справа появляется синий блок с навигацией (.spoiler-body) - и хочу чтобы эта же кнопка (.spoiler-title) при этом, поменяла свой цвет с зелёного, на красный. А пока она остаётся зелёная всегда. Не получается поменять.
Потом, я вторично кликаю по этой же (уже должно быть красной) кнопке (.spoiler-title) (но по факту она так и осталась зелёной), блок с навигацией (.spoiler-body) исчезает и центральный слайдер (#sliders-womens-left) вновь расширяется на всю ширину экрана, как и был прежде.
Всё это у меня работает, только я нуждаюсь в 2-х исправлениях:
кнопка должна менять цвет при каждом клике, т.е. - с зелёного на красный, с красного на зелёный и так по кругу…
скрипт js работает только один раз…, ну т.е. Кликнул пару раз на кнопку, блок открылся/закрылся и нужно перезагружать страницу. Потом опять пару раз кликнул…открылся/закрылся и нужно снова перезагружать страницу.
А я хочу, чтобы всё так же работало, но без перезагрузки страницы.
И последнее, alexey1986, я конечно понимаю, что как видно на Вашем скрине, "Консоль 1" - это ошибка в коде, на которую указывает броузер из "инструментов разработчика", но.... Вот моя консоль и 3 ошибки.....на которые указывает мой Chrome. Но исправить опять же, не получается у меня. Вроде всё подключил, правильно пути указал, ан нет.... "Failed to load resource: net::ERR_FILE_NOT_FOUND"
@alexey1986 задавал свой вопрос, вам он не помогал…
По поводу кода в песочнице - вы так ничего и не сделали, понимаете? Я просила в песочнице сделать кликабельный вариант. Да, вы вставили html, css, js, но они не связаны - фрагменты. Доступа к полному коду я по-прежнему не имею. Логику работы вашего скрипта вы мне с помощью скринов объяснили. А мне нужен код, работая с которым я бы могла воспроизвести вашу ошибку, а потом и исправить ее.
А-а…понял. Никогда ничем подобным не пользовался…всегда сам искал подобные решения в Google и Yandex и старался адаптировать к своим задачам, что отнимало целую кучу времени.
Вообщем, получилось как-то так… https://jsfiddle.net/1qxsumv7/11/ Тут правда, всё коряво вышло, но у меня в оригинале всё ровно и чётко. И даже цвет кнопки теперь меняется с зелёного на красный и наоборот. Правда, тут она почему-то не меняет цвет. Но, главное, что у меня в оригинале - цвет кнопки меняется. Правда меняется он сразу, а мне нужно плавно, в пол-секунды. Но, не получается почему-то сделать в js.
А получилось поменять цвет потому, что я невнимательно присвоил color: green; псевдоэлементу button.spoiler-title:after хотя нужно было присвоить button.spoiler-title и цвет в js сразу бы менялся.
Кликните на маленький зелёненький квадратик и появиться синий блок справа, кликните повторно и он исчезнет. А больше скрипт не работает без перезагрузки всей страницы.
