我有一个手风琴的表上的所有设备和浏览器正常工作,但根本不工作在 ios 移动。我找到了解决的办法也仅为 div 的和使用 href,但对我而言,我真的需要用几个列的表。在这里,你有我使用的自举 代码http://jsfiddle.net/k3yrnsux/ 。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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 事件时附加属性传递到选择器的问题吗?不知道为什么。
将
1
2
3
4
5
6
7
8
9
|
$(document).ready(function () { $( "tr" ).click(function () { var sender = $( this ); var targetId = $(sender.attr( "data-target" )) targetId.toggle().collapse(); }); }); |
改为
1
2
3
4
5
6
7
8
9
|
$(document).ready( function () { $( "tr [data-toggle='collapse']" ).click( function () { var sender = $( this ); var targetId = $(sender.attr( "data-target" )) targetId.toggle().collapse(); }); }); |
以上所述就是本文给大家分享的全部内容了,希望大家能够喜欢。