0

我有一个 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..."
},

这两个项目 (itemTitleitemContent) 显示在pdiv 中的相应元素中,它们构成了手风琴显示(显示标题,在单击标题之前隐藏内容)。

它工作正常,除非我在其中添加带有 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,有什么建议吗?

4

1 回答 1

1

a 中只允许内联元素p。请参阅http://www.w3.org/TR/html401/struct/text.html#h-9.3.1。浏览器选择将其呈现为自己的元素,从而将其从隐藏的p.

于 2012-08-02T17:38:12.940 回答