Как сделать открытие и закрытие блока?

Question

[Cheizer]

Есть ссылка SEARCH, по клику на которую показывается блок с формой поиска, по клику второй раз по SEARCH блок закрывается. Также блок закрывается при клике вне блока. Но не всё работает, блок открывается НО НЕ ЗАКРЫВАЕТСЯ по повторному клику на SEARCH. То есть toggle как-то не правильно я сделал. Где ошибся? Вот на codepen поднял пример:
https://codepen.io/Cheizer/pen/PdBOVb

Answer 1

[Andrew]

https://codepen.io/kickerock/pen/oPMpQB
убрал "mouseup"

Comments

[Cheizer]

Спасибо, но в вашем примере вообще не работает :) И mouseup нужен, для того что при клике в сторону тоже закрыть блок

[Andrew]

Роман Кузнецов, я прост удалил еще и if и забыл заменить)
сейчас смотрите

[Cheizer]

Andrew, Спасибо дорогой человек. все равно что то не так, если открыть по SEARCH а закрыть по MOUSEOUT то следующий клик по SEARCH не откроет панель :(

[Andrew]

Роман Кузнецов, Переделал ваш код чуток и повесил всё, через делегирование, на сам документ. Т.е. Клик по нужной ссылке - открывает дроп, в любом другом месте - закрывает.

[Cheizer]

Andrew, БЛАГОДАРЮ!!!! Я еще слишком слаб в js :) про target даже не слышал.

[Cheizer]

Andrew, А можно заменить DOCUMENT "$(document).on( "click", function(e) " на селектор кнопки? .btn_header_search, иначе не работает на сайте. И если заменить не работает :(

[Andrew]

Роман Кузнецов, там смысл немного в другом, клики смотрит по всему документу, если попадается нужный класс(.btn_header_search) то выполняется что-то, для всего остального - он прячется, т.е. при клике в любом другом месте документа.
если поменять на класс кнопки - то не будет обрабатываться клики вне её.
Возможно, у вас еще где-то есть обработка клика.

[Cheizer]

Andrew, а понял, да есть еще moseout + target для другого элемента

[Andrew]

Роман Кузнецов, ну mouseout это про наведение, а не клик, они не "конфликтуют"

[Cheizer]

Andrew, сори, mouseup

$(document).mouseup(function (e) {
        if (!$menu.is(e.target) // if the target of the click isn't the container...
            &&
            $menu.has(e.target).length === 0) // ... nor a descendant of the container
        {
            //$menu.hide();
            $('.dropdown').removeClass("drop");
        }
    });