我创建了与下拉菜单功能相同的自定义元素。它在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});