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

所属分类: 软件编程 / IOS 阅读数: 2015
收藏 0 赞 0 分享

我有一个手风琴的表上的所有设备和浏览器正常工作,但根本不工作在 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();
  });

});

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

更多精彩内容其他人还在看

iOS实现简易抽屉效果、双边抽屉效果

这篇文章主要为大家详细介绍了两款iOS抽屉效果,简易抽屉效果、以及双边抽屉效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS实现左右拖动抽屉效果

这篇文章主要介绍了iOS实现左右拖动抽屉效果,理解ios平台类似于QQ主页面,利用触摸事件滑动touchesMoved实现的效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

IOS实现点击滑动抽屉效果

这篇文章主要为大家详细介绍了IOS实现点击滑动抽屉效果的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

iOS应用中发送HTTP的get请求以及HTTP异步请求的方法

这篇文章主要介绍了iOS应用中发送HTTP的get请求以及HTTP异步请求的方法,代码为传统的Objective-C语言,说明都简单地融入于注释之中,需要的朋友可以参考下
收藏 0 赞 0 分享

总结iOS App开发中控制屏幕旋转的几种方式

这篇文章主要介绍了iOS app开发中控制屏幕旋转的方法总结,分为自动旋转和手动旋转以及强制旋转三种情况,代码为Objective-C语言,需要的朋友可以参考下
收藏 0 赞 0 分享

IOS设计模式之组合设计模式

组合模式,Composite Pattern,是一个非常巧妙的模式。几乎所有的面向对象系统都应用到了组合模式,接下来通过本文给大家介绍IOS设计模式之组合设计模式,需要的朋友参考下
收藏 0 赞 0 分享

浅析Objective-C中分类Category的使用

这篇文章主要介绍了浅析Objective-C中分类Category的使用,使用Category对类进行扩展可以访问原始类的实例变量,需要的朋友可以参考下
收藏 0 赞 0 分享

iOS实现代码只执行一次

本文给大家分享的是在iOS中控制代码在整个软件生命周期中只运行一次的代码,有需要的小伙伴可以参考下。
收藏 0 赞 0 分享

iOS App中调用相册中图片及获取最近的一张图片的方法

这篇文章主要介绍了iOS App中调用相册中图片及获取最近的一张图片的方法,示例代码为传统的Objective-C语言,需要的朋友可以参考下
收藏 0 赞 0 分享

写给iOS程序员的命令行使用秘籍

写给iOS程序员的命令行使用秘籍,多事情在命令行下处理会事半功倍,所以我就iOS程序员可能会用到的功能讲述一下,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享
查看更多