Как сделать закрытие кастомного select по пустой области или по элементу?

Question

[Борис Белов]

Доброго вечера.

Есть такой код

function sect3tab() {
		if ($(window).width() <= 768) {
			$('.section-3 .mob-select-tab').on('click', function(){
				$('.section-3 .info-wrap .left .ul').show(0);
			});

			$('.section-3 .info-wrap .left .ul .li').on('click', mobLiFade);
		} else {
			$('.section-3 .info-wrap .left .ul').show(0);

			$('.section-3 .info-wrap .left .ul .li').off('click', mobLiFade);
		}
	}
	sect3tab();

С помощью него открывается вот такой таб (селект)


Мне надо чтобы при нажатии на ".section-3 .mob-select-tab" как открывался селект, так и закрывался на ".section-3 .mob-select-tab".
А если еще подскажите, что прописать чтобы закрывалось по области, буду безумно благодарен)

Comments

[Борис Белов]

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

Answer 1

[Матвей Феникс]

Для того, чтобы вам помогли - выкладывайте код демки на codepen или его аналог - никто не захочет гадать по кофейной гуще.

1) Открытие и закрытие делается обычно через .toggleClass('класс').
К примеру - изначально меню скрыто через display: none, при клики через toggleClass вешается или убирается класс active, в котором задан стиль display: none;
Ну или еще можно делать проверку на наличие display: none, и в зависимости от результата делать либо .show() либо .hide()
2) Скрытие по клику вне области блока делается так:

$(function ($) {
    $(document).mouseup(function (e) {
        const block = $(".ваш_блок"); // переменная block - это ваш блок, который скрывается/показывается
        if (!block.is(e.target)
            && block.has(e.target).length === 0) {
            block.removeClass('класс'); // класс который показывает блок, к примеру с display: block
        }
    });
});