Question

我想要以下内容：

我的第一个标题（以及相关的面板）还剩下所有其他面板
所有手风琴元素的右边缘都应该是合理的

jQuery手风琴

+---------+
|header 1 |
+---------+
|  ...    |
|content1 |
|         |
+---------+
  +-------+
  |header2|
  +-------+
  |header3|
  +-------+
  |  ...  |
  |cont.3 |
  |       |
  +-------+

我不知道它是否重要，但我动态添加了手风琴（页面已加载后）。

修改

添加手风琴元素并在之后更新手风琴。这基本上就是我所做的：

        var header = document.createElement("h3");
        $(header).css({"width": "350px","margin-left": "50px"})
        header.innerHTML = "Header Text";
        $("#accordion").append(header);
        var div = document.createElement("div");
        $(div).css({"width": "350px","margin-left": "50px"});
        div.innerHTML = "Pannel Text";
        $("#accordion").append(div);
        $("#accordion").accordion("refresh");

Answer 1

这似乎是你想要的东西：

小提琴：http://jsfiddle.net/CzVhk/

CSS [提取] ：

#accordion a{
    margin-left:50px;
}
#accordion div{
    margin-left:50px;
}
#accordion a:first-child{
    margin-left:0px;
}
#accordion a:first-child + div{
    margin-left:0px;
}

HTML ：

<div id="accordion">
    <a href="#one" class="first">Recent Posts</a>
    <div id="one">
        this is some info.
    </div>

    <a href="#two">Popular Posts</a>
    <div id="two">
        this is some more info.
    </div>

    <a href="#three">Archived Posts</a>
    <div id="three">
        this is even more info.
    </div>
    <a href="#four">Archived Posts</a>
    <div id="four">
        this is even more info.
    </div>
</div>

不同宽度的jquery手风琴

1 个答案: