javascript - 我怎样才能让这个 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 被添加到输入中。