Как закрыть элемент по клику из вне?

Question

[Полак Вершинский]

Для тренировки копирую верхнюю панель как на stackoverflow.com
На панели есть input type="search" при клике на неё скрывается меню из трёх пунктов и input растягивается и занимает место этого меню .
Я сделал только эту часть : https://jsfiddle.net/m39k77y7/85/
Подскажите уважаемые знатоки как теперь закрыть и отобразить меню при клике где угодно ??

Answer 1

[Вячеслав Науменко]

$(document).mouseup(function (e) {
    var container = $(".js-input");
    if (container.has(e.target).length === 0){
        container.removeClass('nw');
        $(".js-ul").removeClass("opacity");
    }
});

Типа того

Comments

[Полак Вершинский]

а я вот так сделал - скажи это может быть правильно ? не дурной тон ? https://jsfiddle.net/a70xjoao/32/

[Вячеслав Науменко]

analitic_stager, ну там лишний DIV создаешь на всю страницу, вдруг ты захочешь открыть поиск и сразу нажать куда то, надо будет два клика делать, первый закрыть поиск второй уже нажатие. Мне кажется мой вариант получше будет. Но смотри сам, а так код нормальный.

[Полак Вершинский]

Вячеслав Науменко, я не спорю .. мне кажется этот лишний элемент можно много где и много как использовать ... твой вариант чище ..без лишнего хлама в отличие от моего ...спс за решение

Answer 2

[dramiel007]

через blur событие можно

$(".js-input").on("blur", function(){
       $(".js-ul").removeClass("opacity");
	     $(this).removeClass("nw");
});

https://jsfiddle.net/wngcLkL0/