JS выполняется только один раз по нажатию кнопки, а потом, чтобы сработал, нужно обновлять страницу!


#1
             Доброго времени суток!     Помогите пожалуйста....

Скрипт выполняется только один раз по нажатию на кнопку, а потом, чтобы снова заработал после нажатия кнопки, нужно перезагружать всю страницу. :pensive:
Вопрос: что нужно добавить в 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%') /*ширина левого слайдера*/
    });
});

});


#2

Покажите пример полностью: html+css+js
Желательно через песочницу.


#3

Там только основной код…, без картинок. Не знаю, на сколько это поможет разобраться?..

https://jsfiddle.net/1qxsumv7/

#4

Поможет, если вы доделаете свой образец.
Да, свои изображения вы поставить не можете, но есть сервисы, подобные этому: https://placeholder.com/
Что касается css, то там есть правила для элементов, которых в html нету. Я не могу догадаться, как оно всё должно выглядеть.


#5

вопрос такой что за единичка


#6

Вы можете открыть консоль и посмотреть.


#7

Да, спасибо Вам, Ineska и alexey1986, за отклик! Я, конечно, туповат, но надеюсь, что не до конца :grinning:

                  Вот на скринах:
  1. Я первично кликаю по кнопке (.spoiler-title) - справа вверху (зелёная) …

… и центральный слайдер (#sliders-womens-left) уменьшается влево и справа появляется синий блок с навигацией (.spoiler-body) - и хочу чтобы эта же кнопка (.spoiler-title) при этом, поменяла свой цвет с зелёного, на красный. А пока она остаётся зелёная всегда. Не получается поменять. :smirk:

  1. Потом, я вторично кликаю по этой же (уже должно быть красной) кнопке (.spoiler-title) (но по факту она так и осталась зелёной), блок с навигацией (.spoiler-body) исчезает и центральный слайдер (#sliders-womens-left) вновь расширяется на всю ширину экрана, как и был прежде.

Всё это у меня работает, только я нуждаюсь в 2-х исправлениях:

  1. кнопка должна менять цвет при каждом клике, т.е. - с зелёного на красный, с красного на зелёный и так по кругу…

  2. скрипт js работает только один раз…, ну т.е. Кликнул пару раз на кнопку, блок открылся/закрылся и нужно перезагружать страницу. Потом опять пару раз кликнул…открылся/закрылся и нужно снова перезагружать страницу. :disappointed_relieved:
    А я хочу, чтобы всё так же работало, но без перезагрузки страницы. :sweat:

    И последнее, alexey1986, я конечно понимаю, что как видно на Вашем скрине, "Консоль 1" - это ошибка в коде, на которую указывает броузер из "инструментов разработчика", но.... Вот моя консоль и 3 ошибки.....на которые указывает мой Chrome. Но исправить опять же, не получается у меня. Вроде всё  подключил, правильно пути указал, ан нет.... "Failed to load resource: net::ERR_FILE_NOT_FOUND"
    


#8

Просто напоминаю, что мой js находится здесь: https://jsfiddle.net/1qxsumv7/


#9

@alexey1986 задавал свой вопрос, вам он не помогал…
По поводу кода в песочнице - вы так ничего и не сделали, понимаете? Я просила в песочнице сделать кликабельный вариант. Да, вы вставили html, css, js, но они не связаны - фрагменты. Доступа к полному коду я по-прежнему не имею. Логику работы вашего скрипта вы мне с помощью скринов объяснили. А мне нужен код, работая с которым я бы могла воспроизвести вашу ошибку, а потом и исправить ее.


#10

А-а…понял. Никогда ничем подобным не пользовался…всегда сам искал подобные решения в Google и Yandex и старался адаптировать к своим задачам, что отнимало целую кучу времени.

Сейчас вставил полный код. Правда без картинок.
https://jsfiddle.net/1qxsumv7/1/


#11

Добавьте заглушки вместо изображений или хотя бы укажите в html размеры картинок с помощью атрибутов width и height, чтобы всё отрисовалось нормально.


#12

Вообщем, получилось как-то так… https://jsfiddle.net/1qxsumv7/11/ Тут правда, всё коряво вышло, но у меня в оригинале всё ровно и чётко. И даже цвет кнопки теперь меняется с зелёного на красный и наоборот. Правда, тут она почему-то не меняет цвет. Но, главное, что у меня в оригинале - цвет кнопки меняется. Правда меняется он сразу, а мне нужно плавно, в пол-секунды. Но, не получается почему-то сделать в js.
А получилось поменять цвет потому, что я невнимательно присвоил color: green; псевдоэлементу button.spoiler-title:after хотя нужно было присвоить button.spoiler-title и цвет в js сразу бы менялся.
Кликните на маленький зелёненький квадратик и появиться синий блок справа, кликните повторно и он исчезнет. А больше скрипт не работает без перезагрузки всей страницы.


#13

Проще всего использовать toggleClass.
https://jsfiddle.net/1qxsumv7/13/


#14
Оу.......супер!  :+1:    Благодарю!    :grinning:

 А я ещё в  .spoiler-title-open  добавил: 

position: absolute;
top: 3%;
right: 2%;
z-index: 100;
чтобы появилась эта красная кнопка, а то она пропала…