如何从Google自定义搜索中删除内联“显示”

Question

从表面上看，这看起来很简单，我不知道为什么我不能做到这一点。基本上，我是自定义一个谷歌自定义搜索，我需要能够加载，有接收文本的输入，被隐藏，直到有人点击搜索图标，以使它出现。

这是可行的，但我不能让它切换回隐藏，如果用户再次点击它。

我尝试使用jquery来切换一个更改显示的类，但它不需要(大概是因为搜索是一个iframe)。因此，这似乎给我留下了内联显示选项。

这就是我到目前为止所拥有的。https://jsfiddle.net/tnoqx0fz/28/

<div class="google-search">
  <script>
    (function() {
     var cx = '008413334578704215410:ighdkrrioag';
     var gcse = document.createElement('script');
     gcse.type = 'text/javascript';
     gcse.async = true;
     gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
     var s = document.getElementsByTagName('script')[0];
     s.parentNode.insertBefore(gcse, s);
   })();
 </script>
 <gcse:search></gcse:search>
</div>

CSS

 .google-search {
    width: auto;
    float: left;
    margin-top: -20px;
    overflow: hidden;
    padding: 0px;
}
#___gcse_0 {
    width:auto;
    padding:0px;
    margin:0px;
    display:inline-block;
    margin-top:15px;
}
.gsc-control-cse {
    background-color:transparent !important;
    border:none !important;
    width:auto;
    overflow:hidden;
    padding:0px;
}
.gsc-search-box {
    width:200px !important;
}
.gsc-control-wrapper-cse {
    width:auto;
    position:relative;
}
.gsc-search-box > table {
    background-color: transparent !important;
}
#gs_tti50 > input {
    background:none !important;
    text-indent:0px !important;
}
.gsc-search-button-v2 {
    padding:6px 6px !important;
    border: 2px solid !important;
}
.gsc-search-button {
    background-color:#dd2241 !important;    
    border-radius: 4px !important;
    border-color:#fff !important;
}
.show {
    display:block !important;
}
.hide {
    display:none !important;
}

jQuery

$(document).ready(function() {   
      $(".gsc-input-box").css({display: "none"});
      $("#gsc-i-id1").removeAttr('placeholder');
      $("#gsc-i-id1").attr('placeholder', '');
      $(".gsc-search-button").click(function() {
        $(".gsc-input-box").fadeIn(600);
        if ($(".gsc-input-box").css({display: "none"})) {
          $(".gsc-input-box").css({display: "block"});
        } 
        else if ($(".gsc-input-box").css({display: "block" })) {
          $(".gsc-input-box").css({display: "none"});
          $(".gsc-input-box").fadeOut(300);
        } 
        else {
          $(".gsc-input-box").css({display: "none"});
          $(".gsc-input-box").fadeOut(300);
        }
      });
});

Answer 1

您的代码有一些问题。

• 您将click处理程序附加到类gsc-search-button，但该类有两个元素。输入本身和保存它的<td>。由于这个原因，您的处理程序被调用了两倍，其效果将被隐藏，然后立即再次显示输入。
• 使用jQuery的css的方式是不正确的。你从来没有检查过display，你总是在设置它。
• 处理程序的第一行总是将输入淡入。因此，当其他代码试图对其做出决定时，它总是可见的。

我给你做了一个新的小提琴。这就是我将您的文档就绪函数简化为：

$(document).ready(function() {
    $(".gsc-input-box").css({
        display: "none"
    });
    $("#gsc-i-id1").removeAttr('placeholder');
    $("#gsc-i-id1").attr('placeholder', '');
    $(".gsc-search-button-v2").click(function() {
        console.log($(".gsc-input-box").css('display'), $('.gsc-input-box').is('visible'));
        //$(".gsc-input-box").fadeIn(600);
        if($('.gsc-input-box').css('display') == 'none') {
            $(".gsc-input-box").fadeIn(600);
        }
        else {
            $('.gsc-input-box').fadeOut(300);
        }
    });
});