时间戳

首页 > 解决方案 > 暂时隐藏 HTML / Bootstrap 元素正在改变它们的宽度

javascript - 暂时隐藏 HTML / Bootstrap 元素正在改变它们的宽度

问题描述

新手，请见谅 :D

所以我有一个 div，里面有两个表，它们都包含几个 Bootstrap 按钮。我将它们拉伸到 100% 宽度，以便它们填满整个表格（作为回报，填满整个 div）。

每当我单击其中一个按钮时，我都想隐藏表格并用之前隐藏的其他 div 替换它们。此外，还会出现一个后退按钮，该按钮应该反转该过程。

其中大部分工作正常，但是，在使用后退按钮返回初始状态后，按钮不再填充整个宽度。我不确定有什么帮助，因为我只触及了表格的样式，而不是它们的元素，并且表格仍然填充了 100% 的 div 宽度，如边框所示（见下文）。

我正在引入一个最小的工作示例：

<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="expires" content="3600">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" integrity="sha512-+4zCK9k+qNFUR5X+cKL9EIR+ZOhtIloNl9GIKS57V1MyNsYpYcUrUeQc9vNfzsWfV28IaLL3i96P9sdNyeRssA==" crossorigin="anonymous" />

    <title>Hello!</title>
    <style>
        #options-div {
            display: flex;
        }

        .action-divs, #back-button {
            display: none;
        }

        .options-table {
            table-layout: fixed;
            border: 2px solid green;
            width: 100%;
        }

        .btn-dark {
            width: 100%;
        }

    </style>
</head>

<body>
    <div class="container">
        <div class="row" id="options-div">
            <div class="col-sm-2">
                <button type="button" class="btn btn-dark" id="back-button">Back</button>
            </div>
            <div class="col-sm-8">
                <table class="options-table">
                    <tr>
                        <td>
                            <button type="button" class="btn btn-dark btn-block" id="jet-button">Jet</button>
                        </td>
                    </tr>
                </table>

                <div class="action-divs" id="jet-div">
                </div>
            </div>
            <div class="col-sm-2">
            </div>
        </div>
    </div>
    <script src="myscript.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

为标记。一个带有一个按钮的表格的 div。

和javascript：

var jetButton = document.querySelector("#jet-button");
jetButton === null || jetButton === void 0 ? void 0 : jetButton.addEventListener("click", handleJet);

var backButton = document.querySelector("#back-button");
backButton === null || backButton === void 0 ? void 0 : backButton.addEventListener("click", handleBack);

function handleJet() {
    var optionsTables = document.querySelector(".options-table");
    optionsTables.style.display = "none";
    
    var jetDiv = document.querySelector("#jet-div");
    jetDiv.style.display = "flex";
    backButton.style.display = "flex";
}
function handleBack() {
    var optionsTables = document.querySelector(".options-table");
    optionsTables.style.display = "flex";
    optionsTables.style.tableLayout = "fixed";

    backButton.style.display = "none";
    
    var jetDiv = document.querySelector("#jet-div");
    jetDiv.style.display = "none";
}

抱歉，TypeScript 转换的东西，希望它足够可读。基本上点击我的按钮，我想隐藏表格并显示另一个 div 和后退按钮。单击后退按钮时，我想再次隐藏 div 和后退按钮并重新显示初始表（其中包含按钮）。我已经尝试过像 btn-block 这样的 Bootstrap 类，但没有一个起作用。

提前致谢！

标签： javascripthtmlcsstypescripttwitter-bootstrap

解决方案

问题是当您添加flex到表格元素时。您的button元素将采用 100% 的宽度，但在应用 flex 后，该td元素是最小的内容

   <table class="options-table">
      <tr>
         <td>
           <button type="button" class="btn btn-dark btn-block" id="jet-button">Jet</button>
         </td>
      </tr>
   </table>

您可以尝试使用 align-items: stretch;并始终将 flex 放在桌面上。

另外，我建议使用classList在元素上添加和删除类，而不是直接更改样式。 MDN 元素类列表

推荐阅读