我如何才能使此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

---

编辑：请查看丹尼尔H的答案 -他说的很对。 只需添加 display: none; 会导致首次点击出现问题。 考虑改为移动 display: none; 从search-container input到search-container 。

---

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

Answer 2

我认为您需要移动display: none; 从search-container input到search-container ，无需隐藏子元素，只需隐藏容器。

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

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