当前位置: 首页 > 编程笔记 >

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

何修能
2023-03-14
本文向大家介绍IOS中手风琴表不能移动的解决方法,包括了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();
  });

});

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

 类似资料:
  • 手风琴效果其实就是通过JS改变元素的height,然后加上transition来让css动起来。 准备HTML结构 这里我们使用 dl , 因为 dt 刚好可以模拟标题, dd 模拟内容。 <div class="panel"> <dl> <dt>One Item</dt> <dd>One Item Content .</dd>

  • 我正在使用jQuery手风琴来隐藏一些数据。 accordion标题是一个带有一些标题的表格。有一个标题,我不希望你点击它,因为手风琴事件会触发。 所以 手风琴是可折叠的,如果您单击Test2(类nofunction),手风琴事件不应触发。但是如果您单击Test或其他表头,手风琴应该会触发事件。 我可以添加这个功能吗? 更新测试http://jsfiddle.net/e3Q8d/,包括jQuery

  • jQueryUI中的Accordion Widget是一个基于jQuery的可扩展和可折叠内容持有者,它被分成几个部分,可能看起来像标签。 jQueryUI提供了accordion()方法来实现这一点。 语法 (Syntax) accordion()方法可以使用两种形式 - $(selector,context).accordion(options)方法 $(selector, context).

  • 描述 (Description) 手风琴是一个图形控制元素,显示为堆叠的项目列表。 每个手风琴都可以expanded或stretched以显示与手风琴相关的内容。 可折叠布局 当您使用单个单独的可折叠元素时,您需要省略accordion-list包装元素。 以下是可折叠布局的结构 - <!-- Single collapsible element ------> <div class = "acc

  • 在垂直导航中,如果存在多个分级,常常使用手风琴导航,它会以手风琴方式展开和折叠,来节约空间。 简单的说,手风琴导航就是垂直导航的层层嵌套,需要多少级,就嵌套多少层。这里就以两级导航为例,来介绍手风琴导航的基本制作方法。 为了方便控制手风琴导航的样式和行为,外层导航使用定义列表 dl、而内层使用无序列表 ul 来包裹导航中的链接元素: <dl class="accordion">     <dt>

  • 我在bootstrap 4中制作了手风琴折叠。它可以工作,但不流畅有人知道如何解决这个问题吗?我尝试制作另一个div并将div放在里面,但什么都没有。这是代码。谢谢!