I teach JS. What is the essence. There is an input search (.search-input). initially hidden. There is a button (.search) when you click on it. It is necessary to make it so that when the button is clicked, it appears, and when clicked on the page, it disappears. That is, addClass and removeClass. I tried to implement it like this:

<script type="text/javascript"> $(function(){ $('.search').click(function(){ $('.search-input').addClass('show'); $(!'.search').click(function(){ $('.search-input').removeClass('show'); }); }); }); </script>

but confused. tell me the correct solution, if possible, with reference to the source.

    2 answers 2

     $(function() { $('.search-input').on('blur', function (e) {$(this).removeClass('show');}); $('.search').click(function() { $('.search-input').addClass('show').focus(); }); }); 
     .search-input { display: none; } .show { display: inline-block; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type='text' class="search-input" /><br /> <input type='button' value="Show search field" class="search" />

    • with a focus is a good idea - Igor
    • one
      @Igor, I admire myself :) - user207618
    • And do not share a link to the theory / examples? and that much, for example, hu from 'blur' - it is not clear .. - Anton
    • @ Anton, What links are needed? On the button handler, we hang the listener of the click, inside we assign a class of visibility and immediately focus on the field element. And on the field itself we listen to the event blur , which is triggered when the forum is lost from the field. That is, when you click to any other place. Then just remove the class showing the field. - user207618

    Alternative solution (in Safari does not work):

     $("button").click(function () { $("input").addClass('force-show').focus().removeClass('force-show') }) 
     input { display: none; } input.force-show, input:focus { display: inline-block; } 
     <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button>Show input</button> <input>