メニューを非表示にする関数を書いた後にフォームが消える理由

Question

こんにちは、私はメニューと重複する検索フォームを持っています。デフォルトでは隠されていますが、検索アイテムをクリックすると、私はまた、メニュー項目を隠すコード行を書いたが、メニュー項目とトグルフォームの両方が消えてしまった。本当にイライラする。

私のコードが長いと退屈な場合は、私が認めなければならない場合、ここにあるようです。これは私の問題の真の声明です。私はデフォルトで隠されているフォーム要素を作成しました。検索アイコンをクリックするとフォームはメニュー項目を表示し、メニュー項目を非表示にするコード行を書きました。すぐにフォームが表示されますが、検索アイコンをクリックするとフォームと検索アイコンがすべて消えてフォームがメニュー項目の子要素ではないという問題があります。なぜこれが起こるのですか？ これは私のコードである：

   <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Account 
        <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Login</a></li> 
          <li><a href="#">Sign Up</a></li> 
         </ul> 
        </li> 
       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Blogs 
        <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Guest posts</a></li> 
          <li><a href="#">HTML5 articles</a></li> 
          <li><a href="#">CSS3 articles</a></li> 
          <li><a href="#">JavaScript articles</a></li> 
         </ul> 
        </li> 
       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Connects 
        <span class="caret"></span></a> 
         <ul class="dropdown-menu"> 
          <li><a href="#">Meet an Expert</a></li> 
          <li><a href="#">Get your respnsive website</a></li> 
          <li><a href="#">Tech advice</a></li> 
         </ul> 
        </li> 
      </ul> 
    <div class="pull-right search-case"> 
      <!-- <div class="search-bar-containter"> ---> 
        <form class="search-form">   
         <label class="search-label" id="search-label"><span class="glyphicon glyphicon-search"></span></label> 
         <div class="search-input-container input-element" id="input-search"> 
          <button type="button" class="for-label"><span class="glyphicon glyphicon-search"></button> 
          <input class="search-input" type="search" placeholder="Enter Keyword"> 
         </div>       

        </form> 
      <!-- </div> --> 
       </div> 
.navbar-nav.navbar-2 { 
    margin-right:8.33333333% ; 
} 

.navbar-nav.navbar-2 > li > a { 
     padding: 39px 5px; 
     font-size: 1.18em; 
} 

    /*Definning the search styles*/ 
    .pull-right.search-case { 
     width: 350px; 
     position: relative; 
     top: -70px; 
     /*right: 4.166666665%;*/ 
     z-index: 1000; 
    } 

    .search-label { 
      width: 50px; 
      height: 40px; 
      position: absolute; 
      right: -10px; 
      cursor: pointer; 
    } 
    .search-label .glyphicon.glyphicon-search { 
      padding-top: 10px; 
      padding-left: 15px; 
    } 

     .glyphicon.glyphicon-search:hover { 
      color: #fff; 
     } 
     .search-input { 
      width: 70%; 
      height: 30px; 
      position: absolute; 
      right: 28%; 
      top: 6px; 
      padding-left: 3px; 
      background: #eee; 
      border-top: 2px solid #32ab32; 
      border-bottom: 2px solid #32ab32; 
      border-left: 2px solid #32ab32; 
      border-right: 2px solid #32ab32; 
      backface-visibility: none; 
      box-shadow: 0 0 10px rgba(78,78,78,0.4); 

    } 

     .for-label { 
      width: 30%; 
      height: 30px; 
      position: absolute; 
      right: 6px; 
      top: 6px; 
      background-color: rgba(180,180,180,0.9); 
      border: 2px solid #32ab32; 
      border-top-right-radius: 5px; 
      border-bottom-right-radius: 5px; 


     } 
     .search-input-container { 
      position: relative; 
      background-color: #ffa500; 
      height: 40px; 
      width: 90%; 
      margin-left:5px; 
      border-radius: 5px; 
      box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 
         0 1px 0  rgba(225, 225, 225,.2); 
      transition: all 2s ease-in; 
      display: none; 

}

 .open { 
      display: block; 
     } 

     .search-input-container.open { 
      transition: all 0.4s ease-in; 
    } 

    .hide { 
      z-index: -1; 
     } 
    jQuery(document).ready(function() { 
    var label = $('.search-label').find('span'); 
    var inputContainer = $('.search-input-container'); 
    var navbar_2 = $('.navbar-2'); 
    label.on('click', function() { 
    inputContainer.addClass('open') 
    $(this).addClass('glypihicon.glypicon-times'); 
    navbar_2.hide(); 
    }); 

}）。

私のコードが長いと退屈な場合は、私が認めなければならない場合、ここにあるようです。これは私の問題の真の声明です。私はデフォルトで隠されているフォーム要素を作成しました。検索アイコンをクリックするとフォームはメニュー項目を表示し、メニュー項目を非表示にするコード行を書きました。すぐにフォームが表示されますが、検索アイコンをクリックするとフォームと検索アイコンがすべて消えてフォームがメニュー項目の子要素ではないという問題があります。なぜこれが起こるのですか？

Answer 1

不正な形式のHTMLがあるようです。指定したコードにspan要素がありませんでした。

実例：https://jsfiddle.net/mspinks/ts8kwu0j/