CSS/JavascriptとHTMLはいくつかのプロパティを渡すだけですが、すべてではありません。

Question

隠し検索バーのソースコードをダウンロードしました。クリックすると、テキスト入力バーが表示されます。

私はhomepage.htmlに、このHTMLをコピーした：これは、私は以下のコードを持っている私のHomePage.jsファイルに接続されている

<div id="reserveButtonOuter"> 
    <button id="reserveButton">Reserve a Table</button> 
</div> 

<div id="sb-search" class="sb-search"> 
    <form> 
    <input class="sb-search-input" placeholder="Enter your search term..." type="search" value="" name="search" id="search"> 
    <input class="sb-search-submit" type="submit" value=""> 
    <span class="sb-icon-search"></span> 
    </form> 
</div> 

：

;(function(window) { 

    function UISearch(el, options) { 
     this.el = el; 
     this.inputEl = el.querySelector('form > input.sb-search-input'); 
     this._initEvents(); 
    } 

    UISearch.prototype = { 
     _initEvents : function() { 
     var self = this, 
      initSearchFn = function(ev) { 
      if(!classie.has(self.el, 'sb-search-open')) { // open it 
       ev.preventDefault(); 
       self.open(); 
      } 
      else if(classie.has(self.el, 'sb-search-open') && /^\s*$/.test(self.inputEl.value)) { // close it 
       self.close(); 
      } 
      } 

     this.el.addEventListener('click', initSearchFn); 
     this.inputEl.addEventListener('click', function(ev) { ev.stopPropagation(); }); 
     }, 
     open : function() { 
     classie.add(this.el, 'sb-search-open'); 
     }, 
     close : function() { 
     classie.remove(this.el, 'sb-search-open'); 
     } 
    } 

これはのほんの一部でありますそれは数百行であるので、コード。 .cssファイルは、他の要素で機能しているので、自分のページにリンクされています。検索バーは、オレンジ色の四角形だけで表示されます。クリックすると、コンソールにエラーが表示されません。私はJavascriptのためにそれが何を意味するかわからない？

アドバイスありがとうございました！

Answer 1

あなたのアドバイスは、開発者ツールでCSSにどの要素が適用されているかをチェックすることです。 CSSの読み込み前に、優先度の高い値をロードしているか、セレクタが正しくないか、js例外がスローされている可能性があります。