Таблица аккордеона Bootstrap3 не работает на мобильном устройстве IOS

У меня есть аккордеонный стол, который отлично работает на всех устройствах и в браузерах, но не работает на ios mobile. решения, которые я нашел, предназначены только для div и использования href, но в моем случае мне действительно нужно использовать таблицы с несколькими столбцами. Вот код http://jsfiddle.net/k3yrnsux/. Я использую Boostrap 3.

Кто-нибудь может помочь?

    <div class="table-content">
    <table id="table-collapse" class="table table-responsive table-hover table-striped" style="border-collapse:collapse;">
        <thead>
            <tr>
                <th>#</th>
                <th>Date</th>
                <th>Description</th>
                <th>Credit</th>
                <th>Debit</th>
                <th>Balance</th>
            </tr>
        </thead>
        <tbody>
            <tr data-toggle="collapse" data-target="#demo1" data-parent="table-collapse" class="accordion-toggle">
                <td>1</td>
                <td>05 May 2013</td>
                <td>Credit Account</td>
                <td class="text-success">$150.00</td>
                <td class="text-error"></td>
                <td class="text-success">$150.00</td>
            </tr>
            <tr>
                <td colspan="6" class="hiddenRow">
                    <div class="accordian-body collapse" id="demo1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada ligula non semper facilisis. Sed mattis libero vel convallis tincidunt. Sed tempor auctor ultrices.</div>
                </td>
            </tr>
            <tr data-toggle="collapse" data-target="#demo2" class="accordion-toggle accordion-group">
                <td>2</td>
                <td>05 May 2013</td>
                <td>Credit Account</td>
                <td class="text-success">$11.00</td>
                <td class="text-error"></td>
                <td class="text-success">$161.00</td>
            </tr>
            <tr>
                <td colspan="6" class="hiddenRow">
                    <div id="demo2" class="accordian-body collapse">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque malesuada ligula non semper facilisis. Sed mattis libero vel convallis tincidunt. Sed tempor auctor ultrices.</div>
                </td>
            </tr>
            <tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
                <td>3</td>
                <td>05 May 2013</td>
                <td>Credit Account</td>
                <td class="text-success">$500.00</td>
                <td class="text-error"></td>
                <td class="text-success">$661.00</td>
            </tr>
            <tr>
                <td colspan="6" class="hiddenRow">
                    <div id="demo3" class="accordian-body collapse">
                        <table class="table table-responsive table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>#</th>
                                    <th>Date</th>
                                    <th>Description</th>
                                    <th>Credit</th>
                                    <th>Debit</th>
                                    <th>Balance</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>05 May 2013</td>
                                    <td>Credit Account</td>
                                    <td class="text-success">$150.00</td>
                                    <td class="text-error"></td>
                                    <td class="text-success">$150.00</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>05 May 2013</td>
                                    <td>Credit Account</td>
                                    <td class="text-success">$150.00</td>
                                    <td class="text-error"></td>
                                    <td class="text-success">$150.00</td>
                                </tr>
                        </table>
                    </div>
                </td>
            </tr>
            </tbody>
    </table>
</div>

    function (o) {
    var s = t(this);
    s.attr("data-target") || o.preventDefault();
    var n = e(s),
        a = n.data("bs.collapse"),
        r = a ? "toggle" : t.extend({}, s.data(), {
            trigger: this
        });
    i.call(n, r)
}

    .hiddenRow {
    padding:0px!important;
}
.hiddenRow div {
    margin: 20px;
    white-space:normal;
}

ios html jquery css accordion
person Alexandra Oliveira    schedule 19.12.2014    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Я столкнулся с проблемами с iOS и начальной загрузкой.

По какой-то причине, если вы вручную прикрепите событие click к элементам tr, оно работает без него и выдает, но вы не можете передать дополнительный атрибут селектору.

http://jsfiddle.net/8x3ub2xz/

Кажется, у вас возникают проблемы с присоединением события клика только тогда, когда селектору передаются дополнительные атрибуты? Не знаю, почему.

ЭТО РАБОТАЕТ

$(document).ready(function () {

    $("tr").click(function () {
        var sender = $(this);
        var targetId = $(sender.attr("data-target"))
        targetId.toggle().collapse();
    });

});

ЭТО НЕТ

$(document).ready(function () {

    $("tr [data-toggle='collapse']").click(function () {
        var sender = $(this);
        var targetId = $(sender.attr("data-target"))
        targetId.toggle().collapse();
    });

});
person Sean Wessell    schedule 19.12.2014
comment
большой! Рад, что это помогло. - person Sean Wessell; 19.12.2014
comment
Огромное спасибо! Могу подтвердить, что это работает как шарм. - person Edwin Finch; 18.12.2016