我的Bootstrap折叠手风琴故障排除

时间:2014-12-11 00:00:12

标签: jquery twitter-bootstrap collapse

我似乎有一些初学者的问题......

我尝试制作一个bootstrap collapse accordeon,结果是new和open元素在打开new时关闭(基本上就像在bootstrap documentation中一样)。

我有这个Html标记:

<form id="reserve_form" class="left resform_248" method="post" action="http://www.check24-7.in/demokiosk/direkt-buchen" name="reserve_form">
    <fieldset id="reservation_details">
        <legend>Buchungsdetails</legend>
        <ul>
            <li>Startdatum</li>
            <li>Enddatum</li>
        </ul>
    </fieldset>
    <fieldset id="personal_details">
        <legend>Pers&ouml;hnliche Daten</legend>
        <ul>
            <li>Vornamen</li>
            <li>Nachnamen</li>
        </ul>
    </fieldset>`

我使用jQuery添加了更多标记:

$("#reservation_details > ul")
    .attr("id", "reservation_details_content").addClass("collapse in");

$("#reservation_details > legend")
    .attr("data-toggle", "collapse")
    .attr("data-target", "#reservation_details_content")
    .attr("aria-expanded", "true")
    .attr("aria-controls", "reservation_details_content")
    .attr("data-parent", "#reserve_form");

$("#personal_details > ul")
    .attr("id", "personal_details_content").addClass("collapse");

$("#personal_details > legend")
    .attr("data-toggle", "collapse")
    .attr("data-target", "#personal_details_content")
    .attr("aria-expanded", "false").attr("aria-controls", "personal_details_content")
    .attr("data-parent", "#reserve_form");

我现在可以折叠我的内容但是我也想在打开新内容时关闭旧元素,就像在bootstrap示例中一样。

我想念什么?

我创建了JsFiddle for the troubleshooting

我非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

我刚刚修复了你的Fiddle 调整是添加

class="panel"

同时fieldsets