动态添加的对象赢得't在javascript中拾取样式
Dynamically added object won't pick up styles in javascript
我动态添加的对象不会完全拾取样式。我有这些html对象:
<div id="cssmenu">
<ul id="buttonsDiv">
</ul>
</div>
我添加了几个li元素:
for (var i = 0; i < numOfDays; i++) {
let j=i;
var newButton = $("<li class='active has-sub'><a href='#'><span> Day " + (i + 1) + "</span></a><ul id=button" + (i + 1) + "></ul></li>");
$("#buttonsDiv").append(newButton);
}
点击某个对象后,我想插入子菜单项:
function addEvents(attraction)
{
var newButton = $("<li><a href='#'><span>"+ attraction+ "</span></a></li>");
var ulChildren = document.getElementById('buttonsDiv').children;
var childrenLength = ulChildren.length;
for(var i = 0; i < childrenLength; i++){
if(ulChildren[i].children[1].id == day){
$(ulChildren[i].children[1]).append(newButton);
}
}
}
现在,当我"检查"web上的元素(它们正在被添加)时,插入操作正在按预期进行。但由于某些原因,它没有得到正确的样式,当我对对象进行硬编码时,我会得到所需的效果。这与DOM不识别我的新元素有关吗?
有人能给我指正确的方向吗?
编辑:这是我的CSS文件的链接:
http://triprecommendation.azurewebsites.net/project/buttons_styles.css
CSS:
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu {
width: 200px;
font-family: Helvetica, Arial, sans-serif;
color: #ffffff;
}
#cssmenu ul ul {
display: none;
}
.align-right {
float: right;
}
#cssmenu > ul > li > a {
padding: 15px 20px;
border-left: 1px solid #1682ba;
border-right: 1px solid #1682ba;
border-top: 1px solid #1682ba;
cursor: pointer;
z-index: 2;
font-size: 14px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
background: #36aae7;
background: -webkit-linear-gradient(#36aae7, #1fa0e4);
background: -moz-linear-gradient(#36aae7, #1fa0e4);
background: -o-linear-gradient(#36aae7, #1fa0e4);
background: -ms-linear-gradient(#36aae7, #1fa0e4);
background: linear-gradient(#36aae7, #1fa0e4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
color: #eeeeee;
background: #1fa0e4;
background: -webkit-linear-gradient(#1fa0e4, #1992d1);
background: -moz-linear-gradient(#1fa0e4, #1992d1);
background: -o-linear-gradient(#1fa0e4, #1992d1);
background: -ms-linear-gradient(#1fa0e4, #1992d1);
background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu > ul > li.open > a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
border-bottom: 1px solid #1682ba;
}
.holder {
width: 0;
height: 0;
position: absolute;
top: 0;
right: 0;
}
.holder::after,
.holder::before {
display: block;
position: absolute;
content: "";
width: 6px;
height: 6px;
right: 20px;
z-index: 10;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
.holder::after {
top: 17px;
border-top: 2px solid #ffffff;
border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
border-color: #eeeeee;
}
.holder::before {
top: 18px;
border-top: 2px solid;
border-left: 2px solid;
border-top-color: inherit;
border-left-color: inherit;
}
#cssmenu ul ul li a {
cursor: pointer;
border-bottom: 1px solid #32373e;
border-left: 1px solid #32373e;
border-right: 1px solid #32373e;
padding: 10px 20px;
z-index: 1;
text-decoration: none;
font-size: 13px;
color: #eeeeee;
background: #49505a;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
background: #424852;
color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
display: block;
position: absolute;
content: "";
width: 5px;
height: 5px;
right: 20px;
z-index: 10;
top: 11.5px;
border-top: 2px solid #eeeeee;
border-left: 2px solid #eeeeee;
-webkit-transform: rotate(-135deg);
-moz-transform: rotate(-135deg);
-ms-transform: rotate(-135deg);
-o-transform: rotate(-135deg);
transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
border-color: #ffffff;
}
手动工作示例:
<div id='cssmenu'>
<ul> <!-- buttonsDiv-->
<li><a href='#'><span>Home</span></a></li>
<li class='active has-sub'><a href='#'><span>Products</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
<li><a href='#'><span>Product 2</span></a></li>
<li><a href='#'><span>Pro 2</span></a></li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='active has-sub'><a href='#'><span>Contact</span></a>
<ul>
<li><a href='#'><span>Product 1</span></a></li>
</ul>
</li>
</ul>
</div>
成功了!
这不是CSS的问题。
我有另一个文件,它有一个菜单按钮的点击侦听器事件。由于某种原因,它没有在点击动态添加按钮后启动事件。因此,我在创建时为每个事件添加了一个事件,这就解决了问题!
相关文章:
- javascript样式的背景颜色在设置时闪烁.ASP.NET
- Javascript 样式的第 n 个孩子
- JavaScript样式警报,在用户导航离开页面之前带有链接
- Javascript样式表切换器
- JavaScript 样式类返回空字符串
- DOM 影子主机的 JavaScript 样式
- 任何 html 元素的 Javascript 样式编辑器工具栏
- JavaScript样式表更改器不起作用
- JavaScript样式更改单击在IE中不起作用
- Javascript样式与CSS样式表
- 使用javascript样式打印页面
- 带有文本框的FF Javascript样式问题
- JavaScript样式&笨拙的语法&设计
- 带有变量的javascript样式
- javascript样式的扩展标记信息
- 元素在正文中找不到足够的空间 - JavaScript 样式
- javascript样式-我应该定义变量/类吗
- 为什么 javascript 样式属性无法按预期工作
- 如何使用javascript样式td不使用id和类
- 用Javascript样式的onClick展开文本区域