當(dāng)我意識(shí)到我的web應(yīng)用程序的幻燈片功能不能在移動(dòng)設(shè)備上工作，但可以在桌面上工作時(shí)，這個(gè)問題就開始了。我有一個(gè)滿是行的表，每行都有一個(gè)& quotx & quot緊挨著他們。當(dāng)一個(gè)& quotx & quot我希望該行向左滑動(dòng)并顯示一個(gè)刪除按鈕。當(dāng)再次單擊它時(shí)，我希望該行滑回其原始位置。我發(fā)現(xiàn)只需在table元素上放置overflow: hidden并在每個(gè)tr上使用left和transition屬性就可以做到這一點(diǎn)。以下代碼適用于我的桌面系統(tǒng)，但不適用于移動(dòng)設(shè)備:

CSS:

table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    width: 100%;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}
tbody tr {
    border-bottom: 1px solid #dddddd;
    position: relative;
    left: 0;
    transition: left 0.5s;
}
.swipe {
    left: -70px;
}

HTML/PHP:

echo "
<div class='history'>
    <h2 id='weight-history-title' align='center'>Weight History</h2>
    <table>
        <thead>
            <tr>
                <th class='th_border'>Date Weighed</th>
                <th>Weight</th>
                <td></td>
            </tr>
        </thead>
        <tbody>
";
while($row=$selectQuery->fetch_assoc()){
    $dateWeighed = htmlspecialchars(date("m/d/y", strtotime($row["date_weighed"])));
    $weight = htmlspecialchars($row["pounds"]);
    $id = htmlspecialchars($row["id"]);
    echo "
        <tr>
            <td>$dateWeighed</td>
            <td>$weight lbs</td>
            <td><img class='delete-icon' src='images/delete.png' style='cursor: pointer; width: 15px; height: 15px;'></td>
            <td class='delete'><a href='delete.php?id=$id' class='delete-button'>Delete</a></td>
        </tr>
    ";
}
echo "
    </tbody>
</table>
";

JavaScript:

for(const x of document.querySelectorAll(".delete-icon")){
    x.addEventListener("click", function(){
        let tr = x.parentElement.parentElement;
        tr.classList.toggle("swipe");
        alert("tagname: " + tr.tagName + "\nclassname: " + tr.className + "\nposition: " +     getComputedStyle(tr).position);
    });
}

當(dāng)一個(gè)& quotx & quot單擊時(shí)，swipe類被添加到它的父行，應(yīng)該向左滑動(dòng)70px，但是在mobile上，當(dāng)& quotx & quot被點(diǎn)擊。

通過一些研究，我發(fā)現(xiàn)它在手機(jī)上不工作的原因是因?yàn)槲恢?相對(duì)沒有被應(yīng)用到每個(gè)tr。為了仔細(xì)檢查這一點(diǎn)，我讓JavaScript在每個(gè)tr被單擊時(shí)提醒其位置屬性。在桌面上，它警告位置:相對(duì)，而在移動(dòng)上，它警告位置:靜態(tài)，這是默認(rèn)的。我已經(jīng)嘗試在每個(gè)tr上使用內(nèi)聯(lián)CSS添加position: relative，還使用了！重要的財(cái)產(chǎn)旁邊沒有成功。

為什么位置屬性在移動(dòng)設(shè)備上會(huì)被忽略？

注意:當(dāng)您通過桌面瀏覽器上的開發(fā)者工具預(yù)覽移動(dòng)屏幕時(shí)，該代碼可以工作。你必須在IOS/ Android設(shè)備上實(shí)際查看網(wǎng)頁才能發(fā)現(xiàn)問題。表格在這一頁的底部。

網(wǎng)頁網(wǎng)址:https://madlibsrandomgenerator . 000 webhostapp . com/weight/index . PHP