Question

我在切换点击时有可扩展的搜索框。我想更改搜索框以显示鼠标切换悬停，所以我将JS代码更改为：

 jQuery(document).ready(function($) {
     $(".search-toggle").hover(function() {
         $("#search-container").slideToggle('fast', function() {
             $(".search-toggle").toggleClass('active');
         });
     });
 });

但是当鼠标离开谷歌时，搜索框会立即消失 - 所以我无法使用搜索。

Answer 1

就像你问的那样。

为了使其正常工作，您应该在搜索栏容器中放置悬停按钮。同时检查css我对不透明度以及搜索栏的宽度和填充进行了更改以便工作。

var searchContainer = $("#search-container");
$(".search-toggle").hover(function () {
    searchContainer.slideDown('fast');
});

//hide when search button clicked
$('input[type=submit]').on('click', function(){
    searchContainer.slideUp('fast');
});

searchContainer.mouseleave(function(){
    searchContainer.slideUp();
});

link to your code

更新的答案：

check here

保持下拉搜索框可见JS

1 个答案: