Question

我在td中遇到Slick.js的问题。它没有以正确的方式显示。您可以在https://codepen.io/chrplatou/pen/JjjVbVq码本中查看其行为。

我不知道是否可以在td中使用slick，但是如果有人对如何解决它有想法，将不胜感激。预先感谢！

它与实际图片的行为相同。

<link href="~/Content/slick.css" rel="stylesheet" type="text/css" />
<link href="~/Content/slick-theme.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/jquery.js"></script>

<table>
  <thead>
    <th>Weighing-num</th>
    <th>Lincense</th>
    <th>Client</th>
    <th>Deviation</th>
  </thead>
  <tbody>
    <tr class="clickable-row">
      <td>128374</td>
      <td>HJ73264</td>
      <td>Company</td>
      <td>False -Click the row</td>
    </tr>
    <tr class="hidden-img" style="display: none">
      <td colspan="4">
        <div class="single-item">
          <div>
            <h1>Content1</h1>
          </div>
          <div>
            <p>Content2</p>
          </div>
        </div>
      </td>
    </tr>
    <tr class="hidden-row" style="display: none">
      <td colspan="3">
        <button id="img-btn">Show pictures</button>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>
<script src="~/slick/slick.js"></script>

jQuery：

$(document).ready(function(){
  $(".clickable-row").click(function(){
    $(".hidden-row").toggle();
  })
})

$(document).ready(function(){
  $("#img-btn").click(function() {
    $(".hidden-img").toggle();
  })
})

$(document).ready(function () {
        $('.single-item').slick({
            arrows: true,
            dots: true,
            infinte: true
        });
    });

Answer 1

为转盘设置一个宽度，直到单击“显示图片”按钮，然后才对其进行初始化-否则，您将在display: none;时对其进行初始化，并且此显示将无法正确显示（如果您搜索）。

此外，您无需继续重写$(document).ready(function()-只需将它们全部包装在一起即可：

$(document).ready(function() {
  $(".clickable-row").click(function() {
    $(".hidden-row").toggle();
  })

  $("#img-btn").click(function() {
    $(".hidden-img").toggle();

    $(".single-item").slick({
      arrows: true,
      dots: true,
      infinte: true
    })
  })
})

table {
  border: solid 1px;
  width: 500px;
}

.slick-slider {
  width: 500px;
}

<table>
  <thead>
    <th>Weighing-num</th>
    <th>Lincense</th>
    <th>Client</th>
    <th>Deviation</th>
  </thead>
  <tbody>
    <tr class="clickable-row">
      <td>128374</td>
      <td>HJ73264</td>
      <td>Company</td>
      <td>False -Click the row</td>
    </tr>
    <tr class="hidden-img" style="display: none">
      <td colspan="4">
        <div class="single-item">
          <div>
            <h1>Content1</h1>
          </div>
          <div>
            <p>Content2</p>
          </div>
        </div>
      </td>
    </tr>
    <tr class="hidden-row" style="display: none">
      <td colspan="3">
        <button id="img-btn">Show pictures</button>
      </td>
    </tr>
    <tr></tr>
  </tbody>
</table>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>

<td>中的Slick.js轮播

1 个答案: