Question

我希望在只有移动版本的表格的“模型详细信息”标题上点击时，滑块效果才能显示在表格中。我正在使用Shopify平台。

我的表格代码如下：

<section id="product-info-content">
<h1 class="centered" style="border-bottom: dashed 1px #ccc;">MODEL DETAILS</h1>
<table>
<tbody>
<tr>
<td colspan="2" width="800">
<p style="text-align: left;">*Product colour may slightly vary due to photographic lighting sources or your monitor settings.</p>
</td>
</tr>
<tr style="text-align: left;">
<td colspan="2" width="800">
<p> </p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p>Texture</p>
</td>
<td width="632">
<p>High quality, lightweight, soft single jersey.</p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p>Material</p>
</td>
<td width="632">
<p>We make all T-shirts with Pure Cotton.</p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p>Colour</p>
</td>
<td width="632">
<p>Navy Blue</p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p>Design</p>
</td>
<td width="632">
<p>Design is printed on Front Side of T-shirt</p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p>Fit</p>
</td>
<td width="632">
<p>Regular Fit.</p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p>Neck Type</p>
</td>
<td width="632">
<p>Round Ribbed Neck</p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p>Sleeves</p>
</td>
<td width="632">
<p>Half Sleeves</p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p> </p>
</td>
<td width="632">
<p> </p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p>Packaging</p>
</td>
<td width="632">
<p>Tees are sealed in a plastic bag &amp; then placed in tamper proof bags so they are super secure when they reach you.</p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p>Printing Method</p>
</td>
<td width="632">
<p>Water Colour Direct to Garment printing</p>
</td>
</tr>
<tr style="text-align: left;">
<td width="168">
<p> </p>
</td>
<td width="632">
<p> </p>
</td>
</tr>
<tr style="text-align: left;">
<td colspan="2" width="800">
<p>COPYRIGHTS © 2015 AMAZZY. Some Rights Reserved. Commercial use of content &amp; images without permission is prohibited.</p>
</td>
</tr>
</tbody>
</table>
</section>

我是jQuery的新手。我该怎么做？任何帮助都会很棒。

Answer 1

单击元素时，首先检查窗口的宽度，然后检查它是否为移动设备，继续进行滑动操作。如下所示：

$(document).on('click', '#your-target-selector', function () {
    if ($(window).width() < 768) {
        // do your slider stuff
    }
});

如何在仅在moblie版本

1 个答案: