So entfernen Sie inline "Show" von Google Benutzerdefinierte Suche

Question

Auf der Oberfläche scheint dies ziemlich einfach und ich bin mir nicht sicher, warum ich das nicht richtig machen kann. Im Grunde bin ich Customizing eine benutzerdefinierte Google-Suche und ich muss in der Lage sein zu laden die Eingabe, die Text erhalten wird ausgeblendet, bis jemand auf das Suchsymbol klickt, um es erscheinen zu lassen.

Das funktioniert, aber ich kann nicht es zurück zu verbergen, wenn der Benutzer es erneut klickt.

Ich habe versucht, jquery zu verwenden, um eine Klasse umzuschalten, die die Anzeige ändert, aber es dauert nicht (vermutlich, weil die Suche ein iframe ist). Das lässt mich mit Inline-Display-Optionen aussehen.

Das ist was ich bisher habe. https://jsfiddle.net/tnoqx0fz/28/

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> 

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

Es gab ein paar Probleme mit Ihrem Code.

• Sie haben Ihre click Handler Klasse gsc-search-button aber es gibt zwei Elemente mit dieser Kategorie von Anteilen. Der Eingang selbst und die <td> halten es. Aus diesem Grund wurde Ihr Handler doppelt aufgerufen, dessen Wirkung sich dann verbergen würde, und die Eingabe sofort wieder anzeigen.

• Die Art und Weise, wie Sie jQuery CSS verwendet haben, war falsch. Sie haben nie die display überprüft, die Sie immer eingestellt haben.

• In der ersten Zeile Ihres Handlers wurde die Eingabe immer ausgeblendet. So war es immer sichtbar, wenn der Rest des Codes versuchte, Entscheidungen darüber zu treffen.

Ich machte Sie eine neue fiddle. Dies ist, was ich vereinfacht Ihre Dokument bereit Funktion zu:

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