Javascript 如何创建在单击标签时向左滑动的搜索栏

我希望通过css和jQuery实现这种效果。也就是说，创建一个隐藏的搜索栏，单击标签中的搜索图标后，搜索栏将很好地向左滑动。但我就是不能。我确实取得了一些成就，但那相当无聊。我想过渡是看起来像一个在学校和许多其他网站。 这是我的密码：

   <nav> 
       <ul>
           <li><a href="#">Home</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contac</a></li>
     </ul>  

       <div id="search-enclose">
            <form>
                 <div id="label-enclose">
                      <label></labe>
                 </div>
                 <div id="input-enclose">
                      <input type="text" placeholder="Enter Keyword">
                 </div>
                 </form>
                 </div>
   </nav>

JavaScript

 var searchImage = document.getElementById('img');
        var input = document.getElementById('input');
         searchImage.addEventListener('click', function() {
                    if (classie.hasClass(input,'focus')) {
                    classie.removeClass(input,'focus')
                   }else {
                       classie.addClass(input, 'focus')
                       }
           }); 

值得一提的是，这几乎是我在网上找到的一段代码的副本，我的格式和css可能很糟糕，但我知道我想要什么，只要有一个好的方向，我就能实现。只是希望搜索栏显示在导航列表项的顶部，当以一种好的方式单击时，

---

我确实认为CSS转换可以实现这一点，但事实并非如此。有人能告诉我该怎么做吗？

在标签上单击左边的动画：使用JQuery动画：

HTML:

CSS:

---

下面是一个仅使用CSS的示例

正是焦点状态触发了字段打开。单击其他任何位置将关闭搜索字段

我没有包括搜索按钮，但你可以将它添加到字段旁边，隐藏它并聚焦，显示按钮并隐藏标签

正文{
字体系列：无衬线；
字体大小：16px；
}
#搜索包围{
边框：1px实心#ccc；
溢出：隐藏；
}
#标签附上{
左边框：1px实心#ccc；
浮动：对；
}
#标签附上标签{
填充：1em；
光标：指针；
显示：内联块；
}
#输入包围{
浮动：对；
字号：0；
}
#输入封闭输入{
边界：无；
左边框：1px实心#ccc；
填充：1.1微米0；
字体大小：16px；
宽度：0；
右边距：-1px；
过渡：全部3秒；
}
#输入：焦点{
宽度：15em；
左：1米；
右侧填充：1em；
大纲：无；
}
钮扣{
边界：无；
左边框：1px实心#ccc；
填充：1.1微米0；
背景：#fff；
字体大小：16px；
光标：指针；
宽度：0；
右边距：-1px；
溢出：隐藏；
过渡：全部3秒；
}
#输入：焦点+按钮{
宽度：5em；
填料：1.1米；
右边框：1px实心#ccc；
保证金权利：-3.1米；
}
svg{
宽度：1米；
高度：1米；
}

搜寻

$（“#searchbar.search label”）。在（“单击”，函数（e）{
e、 预防默认值（）；
$（“#搜索栏”）.toggleClass（“折叠”）；
});//单击

#搜索栏
{
位置：相对位置；
}
#搜索栏#外滑动面板
{
显示：内联块；
溢出：隐藏；
位置：绝对位置；
排名：0；
右：30px；
宽度：240px；
过渡：宽度0.4s；
}
#搜索栏#内滑动面板
{
宽度：240px；
}
#搜索栏。搜索标签
{
宽度：30px；
高度：30px；
文本对齐：居中；
位置：绝对位置；
右：0；
排名：0；
线高：30px；
}
#搜索栏。搜索标签。fa时间，
#searchbar.collapsed.search label.fa search
{
显示：内联块；
}
#搜索栏。搜索标签。fa搜索，
#searchbar.collapsed.search label.fa times
{
显示：无；
}
#搜索栏.折叠#外滑动面板
{
宽度：0px；
}

搜寻

要在单击搜索图标时展开搜索栏吗？你认为它什么时候会再次崩溃？我的意思是再次单击图标或以其他方式？最初它应该是隐藏的，并在单击图标时显示，但显示方式是，它将以某种过渡效果向左滑动。这就是我们学校的情况。他们的搜索栏你也可以从这些链接中得到想法。事实上，我用过那个叫我尼克·波斯特的东西，我没有想要的效果。谢谢，毫无疑问，这就是我要找的，我会研究这些代码，看看它们是如何加在一起的。只是，我想实现它，而不是bootsrap@pedroyanky很高兴它帮助了你。关于引导，此代码不依赖于引导。我从引导cdn中包含的css仅用于导入搜索和交叉图标。你可以使用你自己的图标。

 var searchImage = document.getElementById('img');
        var input = document.getElementById('input');
         searchImage.addEventListener('click', function() {
                    if (classie.hasClass(input,'focus')) {
                    classie.removeClass(input,'focus')
                   }else {
                       classie.addClass(input, 'focus')
                       }
           }); 

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<nav> 
   <ul>
       <li onclick="animateMe()" ><a href="#">Home</a></li> 
       <li onclick="animateMe()"><a href="#">About</a></li>
       <li onclick="animateMe()"><a href="#">Contac</a></li>
 </ul>  
<br>
<br>
   <div id="search-enclose" >
        <form>
             <div id="label-enclose">
                  <label></labe>
             </div>
             <div id="input-enclose">
                  <input type="text" placeholder="Enter Keyword">
             </div>
             </form>
             </div>
</nav>

 var searchImage = document.getElementById('img');
             var input = document.getElementById('input');
             searchImage.addEventListener('click', function() {
                    if (classie.hasClass(input,'focus')) {
                    classie.removeClass(input,'focus')
                   }else {
                       classie.addClass(input, 'focus')
                       }
                       }) 
   function animateMe(){
   $("#search-enclose").css({left:left}).animate({"left":"0%"}, "slow");
   }

nav {
          position: relative;
     }
     ul {
          position: absolute;
          left: 25%;
          list-stye: none;
          z-index: 10;
       }
      li{
          float: right;
        }
        #search-enclose {
             width: 500px;
             position :absolute;
             left:20%;
        }
        #label-enclose {
              position: absolute;
              top: 46px;
              left: 30%;
              height: 35px;
              width: 60px;
              line-height: 35px;
              z-index: 20;
              display:none;
         }

              #label-enclose label {
              display: block;
              height: 35px;
              width: 60px;
              cursor: pointer;
            }

            #input-enclose {
                 position: absolute;
                 top: 46px;
                 width: 300px;
                 height: 35px;
                  z-index: 5;
                 overflow: hidden;

                  }
                  #input {
                      display: block;
                      position: absolute;
                      width: 270px;
                      height: 35px;
                      margin: 0;
                      border: none;
                      color: #fff;
                      font-size: 18px;
                      backface-visibility: none;
                      border-radius: 0;
                      transition: left 0;   
                       }

                  #input-enclose input:focus {
                        outline: none;
                      }

                 #input-enclose .focus {
                       display: block;
                     }

                   #input-enclose .focus input {
                        left: 0;
                        transition: left 0.3s;
                      }