IOS中手风琴表不能移动的解决方法

2020-07-26 03:36:09

字体：大中小

来源：转载

供稿：网友

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

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

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

上一篇：Objective C从远程url下载图片方法汇总

下一篇：Nib文件是什么？Nib文件打开方法