Модификация js?

Question

[Виталя Орлин]

Данный код открывает и закрывает блок по клику на элемент. Помогите модифицировать его так, что бы закрывался блок не только по клику на элемент, а в любое место на экране тыкнул и он закрылся.

$(document).ready(function() {
	$('.click-gs').on('click', '.extremum-click', function() {
		$(this).toggleClass('red').siblings('.extremum-slide').slideToggle(0);
	});
});

Comments

[Виталя Орлин]

Вопрос не решен.. При таком сценарии:

$(document).ready(function() {
	$('.click-gs').on('click', '.extremum-click', function() {
		$(this).toggleClass('red').siblings('.extremum-slide').slideToggle(0);

	});
	
	 $(document).mouseup(function (e) {
     var click = $(".extremum-slide");
     if (!$('#').is(e.target) && !click.is(e.target) && click.has(e.target).length == 0) {
        click.hide(0);
     }
 });

});

Блок закрывается только при нажатие в любо месте экрана, кроме того элемента с помощью которого он открыт...

[Ankhena]

Виталя Орлин, так, если надо на весь экран, так и пишите клик для window или body

[Виталя Орлин]

Ankhena, Второй день ковыряю.. результата нет, либо перестает закрываться нажимая на экран, либо нажимая на кнопку.

[Ankhena]

Виталя Орлин, моя твоя не понимай

Если надо закрытие по любому места, то зачем отдельно событие по кнопке?

[Виталя Орлин]

Ankhena, Для удобства. Вот здесь когда выбирается <.code lang="javascript".> тоже, нажимаешь на кнопку список появляется, нажимаешь на кнопку пропадает, нажимаешь на любое место на экране - тоже пропадает.. Только ковырять чужой код нет смысла. Код который я ковыряю можно использовать на одной странице сколько угодно раз, он открывает не все элементы, а только тот который выбрал.

[Ankhena]

Виталя Орлин, "кнопка" входит в понятие "любое место окна".
Кнопке меняйте классы, чтобы не было двойного события.
Например, toggleClass("disabled") после клика на кнопку, после клика на все окно снова тот же toggle.

[Виталя Орлин]

Ankhena, Типа так:

$(document).ready(function() {
  $('.click-gs').on('click', '.extremum-click', function() {
    $(this).showClass('red').siblings('.extremum-slide').slideShow(0);

  });


  $(document).ready(function() {
  $('.click-gs').on('click', '.extremum-click', function() {
    $(this).hideClass('green').siblings('.extremum-slide').slideHide(0);

  });

   $(document).mouseup(function (e) {
     var click = $(".extremum-slide");
     if (!$('#').is(e.target) && !click.is(e.target) && click.has(e.target).length == 0) {
        click.hide(0);
     }
 });

});

или лучше подскажите, наглядно, что к чему.. я понимаю что это нагло, но.. с момента вопроса, я так его и не решил..

[Ankhena]

Виталя Орлин, hideClass и showClass я не знаю что это.

как-то так получше https://jsfiddle.net/9dxu1vp6/

[Виталя Орлин]

Ankhena, Опять же повторюсь, это не модальное окно, это выпадающий список.. то есть, как например здесь или вот, лучший вариант

Открывая его, можно закрыть нажав на любое место на экране или же повторно нажать на кнопку.

[Ankhena]

Виталя Орлин,
о, круто скрин происходящего!

Если под "повторюсь", вы имеете в виду это

то из этого было ничерта не понятно, что у вас там происходит

Тогда также как в аналогичном вопросе на тостере https://jsfiddle.net/jpqbsw6m/

[Виталя Орлин]

Ankhena, О да, оно)) Спасибо большое))

[Виталя Орлин]

Ankhena, Еще один вопрос, его можно использовать на одной странице несколько раз, только так, что бы не все открывались, а только нужный? Если можно, то решение я сам попытаюсь найти.. а если нет, то буду ковырять дальше)

[Виталя Орлин]

Ankhena, А ведь можно же сделать событие, то есть например есть три кнопки, три разных div id, нажимая на одну срабатывает событие (например) setting-block которое меняет значение display: none; на display: block;

Можно такую конструкцию сделать и дополнять ее событиями? К примеру мне нужна еще 4 кнопка с событием:

$(document).ready(function() {
var (событие = "setting-block")
var (событие = "information-block")
var (событие = "user-block")
var (событие = "ESES4")

$click(e).open(display = block)
$click(e).close(display = block)
)};

Чет типа этого..

[Ankhena]

Виталя Орлин, разумнее манипуляции с классами, чем с display.
none - всё понятно: блок скрыли
block - вроде вернули обратно. А если блок изначально был inline-block или flex или еще что-то там? Или на момент написания скрипта они все были block, а потом верстка изменилась.

[Виталя Орлин]

Ankhena, Еще один вопрос, его можно использовать на одной странице несколько раз, только так, что бы не все открывались, а только нужный?

https://jsfiddle.net/jpqbsw6m/

[Ankhena]

Виталя Орлин, либо связывать их (в смысле пары кнопка-блок) через id и/или data либо через this и родственные отношения.
Как удобнее - зависит от того, как они у вас в коде расположены.

[Виталя Орлин]

Ankhena, То есть, мне придется увеличивать js код, по мере нужды..

1) https://jsfiddle.net/un9qsfwx/

или есть какой то вариант, что бы не создавать километровые строки кода, как например в этом коде:

2) https://jsfiddle.net/o8orpx3k/

Второй вариант на много удобнее, но в нем нет той функции которая мне нужна...

[Ankhena]

Виталя Орлин, учусь вместе с вами :)
https://jsfiddle.net/ny09r6cb/ комментарии внутри, закомментированы старые строчки и добавлены новые
клик вне открытых блоков закрывает ВСЕ блоки

[Виталя Орлин]

Ankhena, оо, спасибо больше)
--
Мне тут предложили еще вот такой вариант: https://jsfiddle.net/o8of57j7/ В принципе все тоже самое, только в другой js обертке.

Какой по вашему мнению мне использовать? Какой из вариантов "лучше" что ли? Или как я и сказал, просто другая обертка, а так нареканий по коду нет и они одинаковы?

[Ankhena]

Виталя Орлин, у второго есть плюсы типа структурности, ввели переменные аккуратненько.
А по реализации - не знаю как лучше.
Можно отдельный вопрос создать и позвать гуру JS :)

[Виталя Орлин]

Ankhena, Какой лучше использовать? ждем гуру)