Question

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

$(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。

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

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");
  });
});

我怎样才能让这个Jquery幻灯片工作？

2 个答案: