Jquery z-index 或 focus/active 错误

Question

我希望输入元素在默认情况下处于隐藏状态，并且与它的工作方式相同now.i希望输入元素在默认情况下处于隐藏状态，并且与它的工作方式相同now.i希望输入元素在默认情况下隐藏，并且与它的工作方式相同 now.i 希望输入元素在默认情况下隐藏，并且与它的工作方式相同 now.i 希望输入元素隐藏是默认的，和它工作的一样工作now.i 希望输入元素是隐藏的是默认的，和它工作的一样now.i 希望输入元素是隐藏的，它是默认的，并且工作与它的工作方式相同 now.i 希望输入元素在默认情况下被隐藏，并且与它的工作方式一样工作 now.i 希望输入元素在默认情况下被隐藏，并且与它现在的工作方式一样工作.

$("#Get").click(function( e ) {
   e.stopPropagation();
   $(".search-control").toggle();
});
$(".search-control").on('click',function( e ){
     e.stopPropagation();
});
$(document).on('click', function( e ) {
   if( e.target.class != 'search-control' ){
       $(".search-control").hide();
   }   
});

#Get {
  position: absolute;
  background: #333333;
  width: 304px;
  height: 10%;
  left: 48px;
  color: lime;
  display: flex;
  align-items: center;
}
#Get:hover {
  background: #4c4c4c;
}
.search-control {
  position: absolute;
  background: #333333;
  width: 344px;
  height: 10%;
  left: 48px;
  bottom: 0px;
  display: flex;
  align-items: center;
}
input#searchbar {
  position: absolute;
  background: #f3f3f3;
  width: 344px;
  height: 100%;
  border: none;
  font-size: 15px;
  bottom: 0px;
  padding: 10px;
  text-indent: 30px;
  font-family: "Segoe UI", sans-serif;
  display: flex;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="Get">
    <span class="c-icon"></span>
    <p class="t-search">Click here to search, i want to go in Front.</p>
  </span>
  <div class="search-control">
      <span class="s-icon"></span>
        <input type="search" id="searchbar" name="q" placeholder="Type here to search" value="I want to hided by default">
      <span id="c-mic"></span>
    </div>

<!-- begin snippet: js hide: false console: true babel: false -->

Answer 1

#searchbar{
  display: none;
  }

 <div class="search-control">
      <span class="s-icon"></span>
        <input type="search" id="searchbar" name="q" placeholder="Type here to search" value="I want to hided by default">
      <span id="c-mic"></span>
    </div>

Jquery z-index 或 focus/active 错误

Jquery z-index or focus/active bug

html

javascript

css

jquery

show-hide