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

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

});

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

(0)

相关推荐

  • jquery插件开发之实现jquery手风琴功能分享

    可用于图片或者容器,使用与常规jQuery插件调用方式无异.实现原理也不难理解,都在代码注释中.想研究的可以看下面的代码,或者样例演示. 复制代码 代码如下: ;(function($){    /*     * 基于jQuery的简易手风琴切换插件     */    $.fn.iAccordion=function(iSet){        var self=this;        iSet=$.extend({Type:'mouseover',Select:'img',Cur:0,In

  • jquery手风琴特效插件

    手风琴效果是项目中使用频率较高的一种效果,原来项目一直都在用easyui的,临近年末,试着自己写了一个 css样式 复制代码 代码如下: /* CSS Document */ body {     margin: 0 auto;     padding: 0 auto;     font-size: 9pt;     font-family: 微软雅黑, 宋体, Arial, Helvetica, Verdana, sans-serif; } .accordion {     padding-l

  • iOS7 毛玻璃特效代码

    原图: 效果图: 实现: 首先需要导入Accelerate.framework. 然后把两个文件加入到自己的项目中即可. UIImage+ImageEffects.h 复制代码 代码如下: #import @interfaceUIImage(ImageEffects) -(UIImage*)applyLightEffect; -(UIImage*)applyExtraLightEffect; -(UIImage*)applyDarkEffect; -(UIImage*)applyTintEffe

  • 基于JQuery的一句话搞定手风琴菜单

    一.Html代码 复制代码 代码如下: <div class="MenuSubTitle AccordionCollapse">子菜单1</div> <div> <a href="Fld_BaseData/aa.aspx">aa管理</a><br/> <a href="Fld_BaseData/bb.aspx">bb管理</a><br/>

  • 基于jquery的slideDown和slideUp做手风琴

    手风琴 *{ padding:0; margin:0; } body{ background:#fafafa; font-size:12px; } .slider{ line-height:24px; width:700px; color:#7ecef4; margin:10px auto; background:#010e16; } .slider dt{ background:#f5f5d2; padding-left:30px; cursor:pointer; overflow:hidde

  • 让人印象深刻的10个jQuery手风琴效果应用

    今天这篇文章向大家展示10个非常酷的应用 jQuery 手风琴(according)效果网站,一起欣赏. 1. Unowhy 2. Helloewy 3. Djafar Inal 4. Made by Elephant 5. Engage Interactive 6. Jaboh 7. Nerve Music Store 8. Loewy Design 9. Alex Cohaniuc 10. EyeDraw 作者:山边小溪

  • jquery实现手风琴效果实例代码

    复制代码 代码如下: //jquery实现手风琴效果  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <

  • jquery插件制作 手风琴Panel效果实现

    首先我们还是创建一个html文件,里面包含如下的html结构. 复制代码 代码如下: <div id="pane-container"> <div class="pane"> <h1>first pane</h1> <p>this script should allow only one pane to be visible at a time.</p> </div> <div

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

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

  • 移动端页面在ios中不显示图片的解决方法

    在移动端开发中,有的时候可能遇到这样的问题,我从别人网站上下载下来的图片,然后做出H5页面,但是在浏览器中和android中都显示正常,可是一到ios中图片就不显示了,这个时候就需要注意了,可能是图片的格式问题导致ios中不认识,比如我从网上下载的图片保存到电脑中不能预览的图片就是这种. 在计算机中打开预览图片显示如下: 这样的图片在ios中就不显示,解决办法很简单,就是在下载的时候去掉后面的类型就可以了, 以上这篇移动端页面在ios中不显示图片的解决方法就是小编分享给大家的全部内容了,希望能给

  • 关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)

    最近的项目用的bootstrap前端,手机刚刚更新IOS9发现其中的modal有个bug,首页点弹出框会出现问题,找了好多资料终于找到解决办法.在CSS中加入以下代码 CSS body { padding-right: 0px !important } .modal-open { overflow-y: auto; } PS:bootstrap datepicker 在bootstrap modal中不显示问题 可以通过在 input 输入框之外 嵌套 <span style="posit

  • MYSQL锁表问题的解决方法

    本文实例讲述了MYSQL锁表问题的解决方法.分享给大家供大家参考,具体如下: 很多时候!一不小心就锁表!这里讲解决锁表终极方法! 案例一 mysql>show processlist; 参看sql语句 一般少的话 mysql>kill thread_id; 就可以解决了 kill掉第一个锁表的进程, 依然没有改善. 既然不改善, 咱们就想办法将所有锁表的进程kill掉吧, 简单的脚本如下. #!/bin/bash mysql - u root - e " show processli

  • Python中MYSQLdb出现乱码的解决方法

    本文实例讲述了Python中MYSQLdb出现乱码的解决方法,分享给大家供大家参考.具体方法如下: 一般来说,在使用mysql最麻烦的问题在于乱码. 查看mysql的编码: 命令:  复制代码 代码如下: show variables like 'character_set_%'; 可以看到如下结果: character_set_client为客户端编码方式: character_set_connection为建立连接使用的编码: character_set_database数据库的编码: ch

  • jquery中的常见问题及快速解决方法小结

    1 在开发开放聊天室的过程中,遇到使用ajax提交表单插入数据库时会插入两条数据的情况 解决办法,在ajax函数返回后,return false. $("#btn").click(function(){ $.ajax({ do something }); return false; }) 2 去除选中元素的某一个属性使用removeattr 3 javascript中与时间相关的函数有setInterval("function",millisec[,"la

  • iOS11中的定位授权的解决方法

    本文介绍了iOS11中的定位授权的解决方法,分享给大家,具体如下: 前台定位权限 1,增加NSLocationWhenInUseUsageDescription. 2,创建CLLocationManager对象,在使用定位服务前调用requestWhenInUseAuthorization(). 3,通过func locationManager(_ manager: CLLocationManager, didChangeAuthorization status: CLAuthorization

  • Unity3D实验室之iOS真机闪退的解决方法

    问题的产生 这个问题一般发生在项目比较大,OO使用良好,泛型继承用的较多的时候.第一次真机测试时,项目终于进入真机测试阶段,之前都是在Unity编辑环境下开发测试,运行的都很良好,信心满满的打包安装,结果闪退...,各种代码调试,跟踪都没什么线索.这怎么办?问题很可能出在了AOT的设置上. 解决方案 这个通常是因为你的程序编译的时候给 trampoline 分配的空间太小,而你的程序中又大量使用了泛型.泛型方法调用和接口实现导致的.具体的解决方法就是在 Unity3D 的编译选项 Player

  • iOS蓝牙设备名称缓存问题的解决方法

    1. 问题背景 当设备已经在 App 中连接成功后 修改设备名称 App 扫描到的设备名称仍然是之前的名称 App 代码中获取名称的方式为(perpheral.name) 2. 问题分析 当 APP 为中心连接其他的蓝牙设备时. 首次连接成功过后,iOS系统内会将该外设缓存记录下来. 下次重新搜索时,搜索到的蓝牙设备时,直接打印 (peripheral.name),得到的是之前缓存中的蓝牙名称. 如果此期间蓝牙设备更新了名称,(peripheral.name)这个参数并不会改变,所以需要换一种方

  • vue中常见的问题及解决方法总结(推荐)

    有一些问题不限于 Vue,还适应于其他类型的 SPA 项目. 1. 页面权限控制和登陆验证页面权限控制 页面权限控制是什么意思呢? 就是一个网站有不同的角色,比如管理员和普通用户,要求不同的角色能访问的页面是不一样的.如果一个页面,有角色越权访问,这时就得做出限制了. 一种方法是通过动态添加路由和菜单来做控制,不能访问的页面不添加到路由表里,这是其中一种办法.具体细节请看下一节的<动态菜单>. 另一种办法就是所有的页面都在路由表里,只是在访问的时候要判断一下角色权限.如果有权限就允许访问,没有

随机推荐