IOS中手风琴表不能移动的解决方法-华尔子博-奥夏网

我有一个手风琴的表上的所有设备和浏览器正常工作，但根本不工作在 ios 移动。我找到了解决的办法也仅为 div 的和使用 href，但对我而言，我真的需要用几个列的表。在这里，你有我使用的自举代码http://jsfiddle.net/k3yrnsux/ 。

100

101

102

<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 的问题，以及引导。
由于某种原因，如果您手动附加到 click 事件 tr 元素它工程而不及的问题，但你不能对选择器通过额外的属性。
http://jsfiddle.net/8x3ub2xz/
似乎只有附加 click 事件时附加属性传递到选择器的问题吗？不知道为什么。
将

$(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();

});

以上所述就是本文给大家分享的全部内容了，希望大家能够喜欢。

本文刊载的所有内容，包括文字、图片、音频、视频、软件、程序、以及网页版式设计等部门来源于互联网，版权均归原作者所有！本网站提供的内容服务于个人学习、研究或欣赏，以及其他非商业性或非盈利性用途，但同时应遵守著作权法及其他相关法律的规定，不得侵犯本网站及相关权利人的合法权利。
联系信息：邮箱aoxolcom@163.com或见网站底部。

THE END