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

我下载了一个隐藏搜索栏的源代码，当点击它时，会显示一个文本输入栏

我已将此html复制到我的

主页.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>

这只是代码的一小部分，因为它有几百行。 css文件与我的页面链接良好，因为它适用于我的其他元素。搜索栏只呈现为一个橙色正方形，单击该正方形时，控制台上不会显示任何错误。我不确定这对Javascript意味着什么

---

任何建议都很好，谢谢

我给你的建议是在开发者工具中检查在元素上强制使用了什么css。

---

可能您正在加载一些优先级更高的值，或者您的选择器不正确，或者您可能在加载css之前抛出了js异常。

建议您找到一种方法，将问题缩小到更具体的问题。一些可以用几句话回答的问题。。。阅读您的问题，我终于明白插件（我们不知道，因为您甚至没有命名它）没有正确呈现。您是否遵循了插件安装说明？你对它做了一些修改吗？在指责某些语言功能之前，你必须证明你知道自己在做什么。。。而你的问题，就目前而言，是无法解决的。谢谢你的回答，涉及的代码太多，无法在这里发布，但我创建了这个JSFIDLE：出于某种原因，它们彼此堆叠在一起，我不确定为什么，因为在演示中，选项卡是水平的，单击时它们会响应单击，与给出的演示不同。你知道这是什么原因吗？

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