Question

我已经下载了隐藏搜索栏的源代码，点击后会显示一个文本输入栏。

我已将此html复制到我的homepage.html：

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

这与我的HomePage.js文件相关联，我在其中有以下代码：

;( 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异常..

为什么CSS / Javascript和HTML只传递一些属性，但不是全部？

1 个答案: