Question

我使用这个示例小提琴来嵌套引导手风琴。Fiddle here

我在MVC / Razor中使用它，我在让儿童手风琴完全展开方面遇到了麻烦。它们只打开一点点，需要滚动，这是不可取的。

这是我的相关Razor片段:(仅供参考，我添加的各种style="height:150px;"属性试图让手风琴扩展，但它们只扩展了手风琴周围的区域，而不是手风琴本身。）

<style>

.accordion-expand-holder {
    margin: 10px 0;
}

    /*.accordion-expand-holder .open, .accordion-expand-holder .close {
        margin: 0 10px 0 0;
    }*/

.ui-accordion-content {
    height: auto;
}
</style>
<link href="~/Content/jquery-ui.css" rel="stylesheet" />
<script src="~/Scripts/jquery-ui.js"></script>

<div class="accordion-expand-holder">
<button type="button" class="open">Expand all</button>
<button type="button" class="close">Collapse all</button>
</div>
@foreach (var item in Model)
{
<div class="accordion">
    <h3>@(item.Name)</h3>
    <div>
        <div class="text-nowrap">
            <button type="button" onclick="javascript:DeleteUserStory('@(item.Id)');">Delete</button>
            <button type="button" onclick="javascript:EditUserStory('@(item.Id)');">Edit</button>
        </div>
        <div>Description: @(item.Description)</div>
        <div>Notes: @(item.Notes)</div>
        <div class="accordion" style="height:150px;">
            <h3>Tasks</h3>
            <ul style="height:150px;">
                @if (item.Tasks != null)
                {
                    if (item.Tasks.Count > 0)
                    {
                        foreach (var task in item.Tasks)
                        {
                            <li style="height:150px;">
                                <button type="button" onclick="javascript:DeleteTask('@(task.Id)');">Delete</button>
                                <button type="button" onclick="javascript:EditTask('@(task.Id)');">Edit</button>
                                <br />
                                <a href="#">@(task.Name)</a>
                                <br />
                                Description: @(task.Description)
                            </li>
                        }
                    }
                    else
                    {
                        <li>No Tasks Assigned.</li>
                    }
                }
            </ul>
        </div>
        <br />
        <button type="button" onclick="javascript:ShowTaskModalForAdd('@(item.Id)');">Add New Task</button>

    </div>
</div>
}


<script>
// Accordion - Expand All #01
$(function () {
    $(".accordion").accordion({
        collapsible: true,
        active: false,
        autoHeight: true,
    });
    var icons = $(".accordion").accordion("option", "icons");
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
            'aria-selected': 'true',
            'tabindex': '0'
        });
        $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
            'aria-expanded': 'true',
            'aria-hidden': 'false'
        }).show();
        $(this).attr("disabled", "disabled");
        $('.close').removeAttr("disabled");
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
            'aria-selected': 'false',
            'tabindex': '-1'
        });
        $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
            'aria-expanded': 'false',
            'aria-hidden': 'true'
        }).hide();
        $(this).attr("disabled", "disabled");
        $('.open').removeAttr("disabled");
    });
    $('.ui-accordion-header').click(function () {
        $('.open').removeAttr("disabled");
        $('.close').removeAttr("disabled");

    });
});
//$("#accordion").accordion();

Answer 1

您的问题似乎是autoHeight选项。

您可以将其设置为false：autoHeight: false，

-OR -

您可以使用autoHeight: true,并在之后添加heightStyle: "content",。

来源： JQuery Accordion Auto Height issue

Answer 2

需要这个：

$(".accordion").accordion({
        collapsible: true,
        active: false,
        autoHeight: false,
        heightStyle: "content" //<- this fixes the problem with the squished height
    });

jquery bootstrap手风琴没有完全垂直扩展

2 个答案: