Javascript 如何删除“内联”；“显示”；从谷歌自定义搜索

从表面上看，这似乎很简单，我不知道为什么我不能做到这一点。基本上，我正在自定义谷歌自定义搜索，我需要能够在加载时将接收文本的输入隐藏起来，直到有人单击搜索图标使其显示

这是可行的，但如果用户再次单击它，我无法让它切换回隐藏状态

我曾尝试使用jquery切换一个类，以更改显示，但没有进行切换（可能是因为搜索是一个iframe）。这样看来，我就有了内联显示选项

这就是我目前所拥有的。

HTML

<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>

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

---

您的代码有一些问题

• 您正在将

  单击

  处理程序附加到类

  gsc搜索按钮

  ，但该类有2个元素。输入本身和保存它的
  。因此，处理程序被调用了两次，其效果将隐藏，然后立即再次显示输入

• 您使用jQuery的css的方式是不正确的。你从来没有检查过

  显示

  你总是在设置它

• 处理程序的第一行总是淡入输入。因此，当代码的其余部分试图对此做出决定时，它总是可见的

我给你做了一个新的。这就是我将您的文档就绪功能简化为：

$(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);
        }
    });
});

---

非常感谢您指出这几个关键点！应该意识到，使用2x的类将否定我试图实现的目标。

$(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);
        }
    });
});