我有一个 js 对象(它实际上是另一个对象中的一个对象):
item2 : {
itemTitle : "This is item 2",
itemContent : "To me, in France, a friend speaks from America. The energy that brings me his voice is born of dammed-up waters a thousand miles from where he sits. <p> The energy I burn up in listening to him is dispensed in the same instant by a lake formed in the River Yser..."
},
这两个项目 (itemTitle
和itemContent
) 显示在p
div 中的相应元素中,它们构成了手风琴显示(显示标题,在单击标题之前隐藏内容)。
它工作正常,除非我在其中添加带有 html 标签的内容,在本例中是一个p
标签。第一段是隐藏的,第二段是显示的,但是由于两个段落都包含在一个p
元素中,该元素display
设置为none
我认为两者都应该隐藏。
所以我认为浏览器(最新的 Firefox)正在查看p
元素并呈现第二段。我想也许如果我关闭第二个p
可以处理它的元素。但没有骰子。
过去两年我一直在做 Objective-c 的东西,所以我的 css/js/html foo 有点不对劲。如果它位于隐藏的元素中,为什么浏览器会显示它?
这是我生成html的方式:
//loop through the accordian properties and build out the html code for them
var i = 0;
for (thisItem in accordian.accordianItems) {
i++;
var thisItemData = accordian.accordianItems[thisItem];
var thisItemCode = "<div id=\"itemContainer\" itemID=\"item_" + i.toString() + "\">" + "<div id=\"itemTitle\"><p class=\"title\"><a href=\"javascript:void(0);\" class=\"titleBar\" itemID=\"item_" + i.toString() + "_titlebar\">" + thisItemData.itemTitle + "</a></p></div>" + "<div id=\"itemContent\"><p class=\"content\">" + thisItemData.itemContent + "</p></div>" + "</div>";
accordianCode += thisItemCode;
}
//push the code out to our container div
$("#accordianContainer").html(accordianCode);
我的CSS:
#itemContainer {
margin: 0 0 5px 0;
}
.title {
margin: 0 0 2px 0;
height: 20px;
vertical-align: middle;
background-color: #39F;
color: #fff;
font-family: Arial, Geneva, sans-serif;
font-size: 14px;
font-weight: 900;
}
.title a {
color: #fff;
text-decoration: none;
}
.content {
margin: 0 0 0 5px;
color: #333;
font-family: "Times New Roman", Times, serif;
font-size: 12px;
font-weight: 200;
display: none;
}
任何帮助,将不胜感激。
是的,我在整个代码中都拼错了手风琴,我在那里修复了它,但不是在这里。:P
编辑:将 p 标签切换为 br,问题就消失了。所以我的新猜测是 ap 是一个块项目?我想我可以设置 br 标签的样式,但我更喜欢 p,有什么建议吗?