0

我想从数据库加载信息并将它们显示为手风琴。在我的情况下，手风琴仅适用于从数据库检索的第一组数据，但手风琴功能不适用于其余数据。我是这个功能的新手我添加了简单的手风琴功能。

$(function() {
$( "#accordion" ).accordion({
    collapsible: true,
       heightStyle: "content"
   });
});

这是 php codeigniter 代码的一部分

echo '<div class="fieldinfio"><h4>BRANCHES</h4></div>';
echo '<a href="'.base_url().'customers/companies/addbranch/'.$company_details->id.'" class="btn_link"><span class="view_btn">Add Branch</span></a>';
echo '<div id="branches">';
foreach ($branch_details as $branch) {

    echo'<h3>'.$branch->branch_name.'</h3>';

    echo '<div id="accordion">';
    echo '<h3>Branch Information</h3>';
    echo '<div>';
    echo '<p>';
    echo '<table class="datatable">';
    echo '<tr><td width="200">Branch Name: </td>';
    echo '<td>'.$branch->branch_name.'</td></tr>';
    echo '<tr><td width="200">Account Type: </td>';
    echo '<td>'.$branch->account_type.'</td></tr>';
    echo '<tr><td width="200">Postcode: </td>';
    echo '<td>'.$branch->postcode.'</td></tr></table>';
    echo '</p>';
    echo '</div>';

    echo '<h3>Default Price</h3>';
    echo '<div>';
    echo '<p>';
    if($default_price[$branch->id]) {

    } else {
        echo '<p>Not Set</p>';
    }
    echo '</p>';
    echo '</div>';

    echo '<h3>Training Locations</h3>';
    echo '<div>';
    echo '<p>';
    echo '<a href="'.base_url().'customers/companies/addlocation/'.$company_details->id.'/'.$branch->id.'" class="btn_link"><span class="view_btn">Add Training Location</span></a>';
    foreach ($location_details[$branch->id] as $location) {
        echo '<span>'.$location->name.'</span>';
        echo '<table class="datatable">';
        echo '<tr><td width="200">Name: </td>';
        echo '<td>'.$location->name.'</td></tr>';
        echo '<tr><td width="200">Postcode: </td>';
        echo '<td>'.$location->postcode.'</td></tr></table>';
    }
    echo '</p>';
    echo '</div>';
    echo '</div>';
}
echo '</div>';
4

1 回答 1

1

看起来分支信息在一个循环中，它将创建多个带有 id 的元素accordion。

元素的 ID在文档中必须是唯一的，因此在您的情况下使用类属性而不是像

echo '<div class="accordion">';
echo '<h3>Branch Information</h3>';

然后

$(function () {
    $(".accordion").accordion({
        collapsible: true,
        heightStyle: "content"
    });
});
于 2013-10-08T03:11:16.580 回答