Вернуть элемент в исходное положение кликнув на свободное от этого элемента место?

Question

[Чёкатилло]

Ребят, я совсем не "бум-бум" в этом мелочевом глупом вопросе. Допишите пожалуйста, будьте любезны:

<script>      
        $('.menu-item-search, .glyphicon-remove').click(function() {
    $('.jqeury-test-form').slideToggle(200);
  });
</script>

С НАСТУПАЮЩИМ ВСЕХ!

Answer 1

[fabrykant]

$(document).click(function(e) {
    var $target = $(e.target);
    if ($target.hasClass('menu-item-search') || $target.hasClass('glyphicon-remove')) {
      $('.jqeury-test-form').slideToggle(200);
    } else if(!$target.parents("div").hasClass('jqeury-test-form')) {
      $('.jqeury-test-form').slideUp(200)
    }
  });

Comments

[Чёкатилло]

БОЛЬШОЕ СПАИСБО! единственный момент..теперь нажимая не на элемент он появляется, а на кнопке появления элемента исчезает. На всякий, css прописан изначально блок скрыт:
.jqeury-test-form {
display: none;}

[fabrykant]

Дмитрий: тогда попробуйте заменить is(":hidden") на is(':visible')

[Чёкатилло]

fabrykant: при клике на кнопку появляется и сразу исчезает )))

[fabrykant]

Я изменил код в ответе, проверьте пожалуйста.

[Чёкатилло]

fabrykant: Все отлично! Благодарю и желаю Вам всех благ в Новом Году!

[Чёкатилло]

fabrykant: млин..В общем, все работает как надо, только закрывается блок когда и на него кликаешь тоже, а это форма поиска

[Сергей delphinpro]

Дмитрий: Про всплытие событий слышали?
Когда вы кликаете по форме, событие всплывает до ближайшего обработчика вверх по DOM дереву вплоть до самого document (т.е. на document вы можете в принципе отловить все события). Если на пути попался обработчик - он выполняется и событие всплывает дальше, если оно не было остановлено в этом обработчике.
Какой из этого следует вывод? Вроде бы простой - повесить обработчик на форму и останавливать в ней всплытие. Но тогда перестанут работать ссылки и кнопки, расположенные внутри формы.
Тогда на ум приходит другое решение - нужно смотреть на инициатора события (event.target) и в зависимости от того, кто это, выполнять или не выполнять определенные действия. Реализацию этого момента я оставляю на вашу ответственность.

[Чёкатилло]

Сергей: Нет не слышал =) Спасибо за инфу Слажено и доходчиво понятно
Я, как и многие может, начинающий и экспериментирующий скорее пользователь, чем разработчик )))

[fabrykant]

Дмитрий: допишите в условии: else if(!$target.hasClass('jqeury-test-form'))

[Чёкатилло]

fabrykant: Здравствуйте! Если так, то все так же (( : $(document).click(function(e) {
var $target = $(e.target);
if ($target.hasClass('menu-item-search') || $target.hasClass('glyphicon-remove')) {
$('.jqeury-test-form').slideToggle(200);
} else if(!$target.hasClass('jqeury-test-form')) {
$('.jqeury-test-form').slideUp(200)
}
});

[fabrykant]

Дмитрий: у меня работает: codepen.io/anon/pen/LGbZJg

[Чёкатилло]

fabrykant: в моем случае видимо все куда тяжелее Сделал как смог пока: cg91812-wordpress-3.tw1.ru Вызывается кнопкой из меню Проще кнопку закрыть установить в блок с поиском, но пока и это тщетно )))

[Чёкатилло]

fabrykant: html:

<div class="poisc">
    <div class="nav">
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>      
       <div class="jqeury-test-form col-lg-12">
<form method="get" name="searchform" id="searchform" action="<?php bloginfo('http://cg91812-wordpress-3.tw1.ru/')?>">
<input type="text" name="s" id="s" value="<?php echo wp_specialchars($s, 1); ?>"/>
<input id="btnSearch" type="submit" name="search" value="<?php _e('↵'); ?>" />
</form>         
        </div>
    </div>
</div>

[fabrykant]

Дмитрий: изменил код в ответе, должно работать

[Чёкатилло]

fabrykant: еее!! Все работает! Спасибо Извиняюсь за приставучесть ) Вдруг и я на что сгожусь, обращайтесь )))))

[fabrykant]

Дмитрий: Пожалуйста!