スライドアウトTextFieldフォーカスを押してコンテンツを失い、遷移を失う

Question

現在、私はウェブ開発を練習するウェブサイトに取り組んでいますが、少し悩まされています。私は、画像 "検索アイコン"をクリックしてから、テキストフィールドをスライドアウトさせることができるようにしたいと考えていますが、それはフォーカスがなく、ユーザーが入力する準備ができています。フォーカスイベントを追加すると動作しますが、遷移が失われ、ナビゲーションホルダーの他のコンテンツが1秒間待ってから戻ってきます。私はなぜこれが起こっているのか非常に混乱しています。私は問題を解決してもう少し理解することを援助したいと思います。ここで

は私のHTMLです：ここでは

<header> 
    <div class="nav-holder"> 
     <nav> 
      <ul> 
       <li><a class="active" href="index.html">HOME</a></li> 
       <li><a href="#">WORK EXPERIENCE&nbsp;&nbsp;<span class="one"></span><span class="two"></span></a> 
        <ul> 
         <li><a href="#">WEB DEVELOPEMENT</a></li> 
         <li><a href="#">IT SUPPORT</a></li> 
        </ul> 
       </li> 
       <li><a href="#">INTRODUCING ME</a></li> 
       <li><a href="#">CONTACT INFORMATION</a></li> 
      </ul> 


     </nav> 

     <form method="post" action=""> 
      <input id="search-box" type="text" name="search" placeholder="Search..."> 
     </form> 

     <img id="search-icon" src="img/searchicon.png"/> 

     <div class="clear"></div> 
    </div> 

</header> 

は私のCSSです：

* { 
    margin: 0; 
    padding: 0; 
} 

.nav-holder { 
    position: fixed; 
    top: 0; 
    background-color: black; 
    opacity: .8; 
    max-width: 100vw; 
    width: 100%; 
    max-height: 40px; 
    height: 100%; 
    overflow: hidden; 
    z-index: 1; 
} 

nav { 
    width: 72vw; 
    line-height: 28px; 
    font-size: 12px; 
} 

.active { 
    color: lightgrey; 
} 

nav li { 
    list-style: none; 
    float: left; 
} 

nav a { 
    text-decoration: none; 
    padding: 6px 12px; 
    display: block; 
    color: dimgrey; 
    font-family: "Verdana"; 
} 

nav a:hover { 
    color: lightgrey; 
    transition: all ease-in-out .3s; 
} 

nav a:hover .one, nav a:hover .two { 
    background-color: lightgrey; 
    transition: all ease-in-out .3s; 
} 

nav ul ul { 
    position: fixed; 
    opacity: 0; 
    z-index: -1; 
    visibility: hidden; 
    background-color: black; 
    transform: translateY(-2em); 
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; 
} 

nav ul li:hover > a { 
    color: lightgrey; 
} 

nav ul li:hover .one, nav ul li:hover .two { 
    background-color: lightgrey; 
} 

nav ul li:hover ul { 
    visibility: visible; 
    opacity: 1; 
    z-index: 2; 
    transform: translateY(0%); 
    transition-delay: 0s, 0s, 0.3s; 
} 

nav ul li ul li { 
    float: none; 
} 

.one { 
    display: inline-block; 
    background-color: dimgrey; 
    height: 1px; 
    width: 7px; 
    transform: rotate(55deg); 
    margin-left: -3px; 
    margin-bottom: 4px; 
} 

.two { 
    display: inline-block; 
    background-color: dimgrey; 
    height: 1px; 
    width: 7px; 
    transform: rotate(125deg); 
    margin-left: -3.2px; 
    margin-bottom: 4px; 
} 

#search-icon { 
    float: right; 
    max-height: 18px; 
    height: 100%; 
    max-width: 18px; 
    width: 100%; 
    cursor: pointer; 
    margin-top: 11px; 
    margin-right: 7px; 
} 

#search-box { 
    width: 200px; 
    box-sizing: border-box; 
    transition: all ease-in-out .3s; 
    position: relative; 
    float: right; 
    margin-top: 9px; 
    margin-right: -200px; 
    line-height: 22px; 
    border: none; 
    outline: none; 
    background-color: black; 
    opacity: .8; 
} 

#search-box:focus { 
    caret-color: lightgrey; 
    color: lightgrey; 
} 

#search-box.active { 
    margin-right: 0; 
} 

@-webkit-keyframes autofill { 
    to { 
     color: lightgrey; 
     background: transparent; 
    } 
} 

input:-webkit-autofill { 
    -webkit-animation-name: autofill; 
    -webkit-animation-fill-mode: both; 
} 

.clear { 
    clear: both; 
} 

そして、ここでは私のjQueryのです：

$(document).ready(function() { 
    $('html').on('click', function (e) { 
     if (e.target.id == 'search-icon') { 
      $('#search-box').toggleClass('active'); 
      $('#search-box').focus(); 
     } 
     else if (e.target.id == 'search-box') { 
       $('#search-box').focusin(); 
     } 
     else { 
      $('#search-box').removeClass('active'); 
      $('#search-box').val(""); 
     } 
    }); 
}); 

は、事前にご協力いただき、ありがとうございます！

Answer 1

オーバーフローを削除：.nav-holderから隠してください。あなたは、応答性のためにnavbarのレイアウトに取り組む必要があります。

$(document).ready(function() { 
 
    $('html').on('click', function(e) { 
 
    if (e.target.id == 'search-icon') { 
 
     $('#search-box').toggleClass('active'); 
 
     $('#search-box').focus(); 
 
    } else if (e.target.id == 'search-box') { 
 
     $('#search-box').focusin(); 
 
    } else { 
 
     $('#search-box').removeClass('active'); 
 
     $('#search-box').val(""); 
 
    } 
 
    }); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.nav-holder { 
 
    position: fixed; 
 
    top: 0; 
 
    background-color: black; 
 
    opacity: .8; 
 
    max-width: 100vw; 
 
    width: 100%; 
 
    max-height: 40px; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 

 
nav { 
 
    width: 72vw; 
 
    line-height: 28px; 
 
    font-size: 12px; 
 
} 
 

 
.active { 
 
    color: lightgrey; 
 
} 
 

 
nav li { 
 
    list-style: none; 
 
    float: left; 
 
} 
 

 
nav a { 
 
    text-decoration: none; 
 
    padding: 6px 12px; 
 
    display: block; 
 
    color: dimgrey; 
 
    font-family: "Verdana"; 
 
} 
 

 
nav a:hover { 
 
    color: lightgrey; 
 
    transition: all ease-in-out .3s; 
 
} 
 

 
nav a:hover .one, 
 
nav a:hover .two { 
 
    background-color: lightgrey; 
 
    transition: all ease-in-out .3s; 
 
} 
 

 
nav ul ul { 
 
    position: fixed; 
 
    opacity: 0; 
 
    z-index: -1; 
 
    visibility: hidden; 
 
    background-color: black; 
 
    transform: translateY(-2em); 
 
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s; 
 
} 
 

 
nav ul li:hover>a { 
 
    color: lightgrey; 
 
} 
 

 
nav ul li:hover .one, 
 
nav ul li:hover .two { 
 
    background-color: lightgrey; 
 
} 
 

 
nav ul li:hover ul { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    z-index: 2; 
 
    transform: translateY(0%); 
 
    transition-delay: 0s, 0s, 0.3s; 
 
} 
 

 
nav ul li ul li { 
 
    float: none; 
 
} 
 

 
.one { 
 
    display: inline-block; 
 
    background-color: dimgrey; 
 
    height: 1px; 
 
    width: 7px; 
 
    transform: rotate(55deg); 
 
    margin-left: -3px; 
 
    margin-bottom: 4px; 
 
} 
 

 
.two { 
 
    display: inline-block; 
 
    background-color: dimgrey; 
 
    height: 1px; 
 
    width: 7px; 
 
    transform: rotate(125deg); 
 
    margin-left: -3.2px; 
 
    margin-bottom: 4px; 
 
} 
 

 
#search-icon { 
 
    float: right; 
 
    max-height: 18px; 
 
    height: 100%; 
 
    max-width: 18px; 
 
    width: 100%; 
 
    cursor: pointer; 
 
    margin-top: 11px; 
 
    margin-right: 7px; 
 
} 
 

 
#search-box { 
 
    width: 200px; 
 
    box-sizing: border-box; 
 
    transition: all ease-in-out .3s; 
 
    position: relative; 
 
    float: right; 
 
    margin-top: 9px; 
 
    margin-right: -200px; 
 
    line-height: 22px; 
 
    border: none; 
 
    outline: none; 
 
    background-color: black; 
 
    opacity: .8; 
 
} 
 

 
#search-box:focus { 
 
    caret-color: lightgrey; 
 
    color: lightgrey; 
 
} 
 

 
#search-box.active { 
 
    margin-right: 0; 
 
} 
 

 
@-webkit-keyframes autofill { 
 
    to { 
 
    color: lightgrey; 
 
    background: transparent; 
 
    } 
 
} 
 

 
input:-webkit-autofill { 
 
    -webkit-animation-name: autofill; 
 
    -webkit-animation-fill-mode: both; 
 
} 
 

 
.clear { 
 
    clear: both; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header> 
 
    <div class="nav-holder"> 
 
    <nav> 
 
     <ul> 
 
     <li><a class="active" href="index.html">HOME</a></li> 
 
     <li><a href="#">WORK EXPERIENCE&nbsp;&nbsp;<span class="one"></span><span class="two"></span></a> 
 
      <ul> 
 
      <li><a href="#">WEB DEVELOPEMENT</a></li> 
 
      <li><a href="#">IT SUPPORT</a></li> 
 
      </ul> 
 
     </li> 
 
     <li><a href="#">INTRODUCING ME</a></li> 
 
     <li><a href="#">CONTACT INFORMATION</a></li> 
 
     </ul> 
 

 

 
    </nav> 
 

 
    <form method="post" action=""> 
 
     <input id="search-box" type="text" name="search" placeholder="Search..."> 
 
    </form> 
 

 
    <img id="search-icon" src="http://placehold.it/50/00ff00" /> 
 

 
    <div class="clear"></div> 
 
    </div> 
 

 
</header>