为什么我的窗体在写了一个隐藏菜单的函数后消失了？

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/