为什么自定义元素如下拉菜单在Mozilla中无法正常工作?

时间:2016-02-15 02:26:08

标签: javascript jquery html css

我创建了与下拉菜单功能相同的自定义元素。它在Chrome中正常运行但在Mozilla中无法正常工作。当我点击下拉箭头时,下拉菜单中的项目未显示。那么会是什么是解决方案吗?

这是我的代码:

**html code**
 <button is="my-dropdown">Demo Dropdown
    <dropdown-header> Title </dropdown-header>
    <dropdown-option>Option 1</dropdown-option>
    <my-separator></my-separator>
    <dropdown-option>Option 2</dropdown-option>
</button>



** JS code**
var dropdownProto = Object.create(HTMLElement.prototype);
     dropdownProto.createdCallback = function(){
      $('.dropdown-toggle').dropdown();

        var output = '';
        for(var i=0;i<this.childNodes.length;i++){
          switch(this.childNodes[i].nodeName){
            case 'DROPDOWN-OPTION':
                  output += '<li>'+this.childNodes[i].innerHTML+'</li>';
                  break
            case 'MY-SEPARATOR':
            output += '<li class="divider" role="separator">'+this.childNodes[i].innerHTML+'</li>';
            break;
            case 'DROPDOWN-HEADER':
            output += '<li class="dropdown-header">'+this.childNodes[i].innerHTML+'</li>';
            break;
          }

        }
        this.innerHTML = icon+this.innerHTML+'<a href="#-" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">  <span class="caret"></span></a>';
        var dropdownList = document.createElement('ul');
        dropdownList.className = 'dropdown-menu';
        dropdownList.innerHTML = output;
        this.appendChild(dropdownList);


    };
    var myDropdown = document.registerElement('my-dropdown',{prototype:dropdownProto,extends:'button'});
    //Dropdown Header
    var DropDownHeaderProto = Object.create(HTMLElement.prototype);
    DropDownHeaderProto.createdCallback = function(){
      this.remove();
    };
  var dropdownHeader = document.registerElement('dropdown-header',{prototype:DropDownHeaderProto});
    //Dropdown Options
    var dropdownOptionProto = Object.create(HTMLElement.prototype);
    dropdownOptionProto.createdCallback = function(){
      this.remove();
    };
   var dropdownOption = document.registerElement('dropdown-option',{prototype:dropdownOptionProto});

    //Seperator for Dropdown
    var separatorProto = Object.create(HTMLElement.prototype);
    separatorProto.createdCallback = function(){
    this.className = 'devider';
    this.remove();
    };
 var Seperator = document.registerElement('my-separator',{prototype:separatorProto});

0 个答案:

没有答案