javascript - 我如何才能使此Jquery幻灯片正常工作？

如何使jQuery幻灯片正常工作？

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

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

最佳答案

您的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添加到输入中。