我怎样才能让这个jquery幻灯片上班？

Question

如何让我的jQuery幻灯片工作？

https://codepen.io/kasiraket/pen/KmKYmL

$(document).ready(function() { 
    $('#search-icon').click(function() { 
     $(".search-container").slideToggle("400", function(){ 
      $(".search-container input").toggleClass("show"); 
     }); 
    }); 
}); 

Answer 1

你slideToggle()和toggleClass()是射击海誓山盟相反。当你的容器被显示时，输入被隐藏 - 当显示输入时，容器被隐藏。

只需在最初添加一个display: none;到search-container，以便容器和输入都处于相同状态。

.search-container { 
    display: none; 
    /*...the rest of your CSS*/ 
} 

这里是你的固定例如：https://codepen.io/anon/pen/WjbwPo

---

编辑：请查看Daniel H's answer - 他做一个好点。只需加入display: none;将导致第一次点击的问题。考虑改为移动display: none;从search-container input改为search-container。

---

您可能想知道我的意思，考虑到加载时容器显然不在页面上;重要的是要认识到它没有显示的唯一原因是因为它的所有内容（输入）都是隐藏的。如果右键单击页面并转到检查元素，可以非常清楚地看到，当您单击搜索图标时，display: none;正在被添加到search-container，同时show正在被添加到输入中。

Answer 2

我认为你需要从search-container input移动display: none;到search-container，没有必要隐瞒的子元素，只是藏容器。

codepen： https://codepen.io/hdl881127/pen/EmaKeL

$(document).ready(function() { 
    $('#search-icon').click(function() { 
    $(".search-container").slideToggle("400"); 
    }); 
});