Проблемы со скрытием элемента по клику

302

10 декабря 2016, 10:35

Имеется поиск на сайте. При нажатии на него появляется сама форма поиска. При клике на вне области поиска он закрывается. Все нормально, но, после того как поиск закрылся вне области, и при новом нажатии на кнопку "Поиск" ничего не происходит, только если нажать второй раз. Как сделать чтобы не надо было 2 раза нажимать, а с первого раза все открывалось?

$(document).ready(function() { 
  $('#search_box').click(function(e) { 
    $(this).toggleClass('active'); 
    $('#search_form').toggle(); 
    e.stopPropagation(); 
  }); 
  $('#search_form').click(function(e) { 
    e.stopPropagation(); 
  }); 
  $('body').click(function() { 
    var link = $('a#btn'); 
    if (link.hasClass('active')) { 
      link.click(); 
    } 
  }); 
}); 
 
jQuery(function($) { 
  $(document).mouseup(function(e) { 
    var div = $("#search_form"); 
    if (!div.is(e.target) && div.has(e.target).length === 0) { 
      div.hide(); 
    } 
 
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<li class="search pull-right search-li"> 
  <input class="search_box" type="checkbox" id="search_box"> 
  <label class="fa fa-search icon-search" for="search_box"></label> 
  <div class="search_form" id="search_form"> 
    <form action="#"> 
      <input type="text" placeholder="Traži..."> 
      <input type="submit" value="search"> 
    </form> 
  </div> 
</li>

Answer 1

$(document).ready(function() { 
  $('#search_box').click(function(e) { 
    $(this).toggleClass('active'); 
    $('#search_form').toggle(); 
    e.stopPropagation(); 
  }); 
  $('#search_form').click(function(e) { 
    e.stopPropagation(); 
  }); 
  $(document).click(function(e) { 
    if ($('#search_box').hasClass('active')) { 
      $('#search_box').click(); 
      e.stopPropagation(); 
    } 
     
  }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> 
<li class="search pull-right search-li"> 
  <input class="search_box active" type="checkbox" id="search_box"> 
  <label class="fa fa-search icon-search" for="search_box"></label> 
  <div class="search_form" id="search_form"> 
    <form action="#"> 
      <input type="text" placeholder="Traži..."> 
      <input type="submit" value="search"> 
    </form> 
  </div> 
</li>