Javascript 暂时隐藏HTML/引导元素正在更改其宽度_Javascript_Html_Css_Typescript_Twitter Bootstrap

Javascript 暂时隐藏HTML/引导元素正在更改其宽度

javascript html css typescript twitter-bootstrap

Javascript 暂时隐藏HTML/引导元素正在更改其宽度,javascript,html,css,typescript,twitter-bootstrap,Javascript,Html,Css,Typescript,Twitter Bootstrap,这里的新手，发发发慈悲吧：D 所以我有一个div，其中有两个表，都包括几个引导按钮。我把它们拉伸到100%的宽度，这样它们就填满了整个表格（反过来，也填满了整个div）每当我单击其中一个按钮时，我都想隐藏这些表，并用以前隐藏的其他div替换它们。此外，出现了一个后退按钮，该按钮将反转该过程大多数操作都很好，但是，在使用“后退”按钮返回初始状态后，按钮不再填充整个宽度。我不确定有什么可以帮助我，因为我只涉及了表格的样式，而不是它们的元素，而且表格仍然填充了其div的100%宽度，如边框所示（见

这里的新手，发发发慈悲吧：D

所以我有一个div，其中有两个表，都包括几个引导按钮。我把它们拉伸到100%的宽度，这样它们就填满了整个表格（反过来，也填满了整个div）

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

大多数操作都很好，但是，在使用“后退”按钮返回初始状态后，按钮不再填充整个宽度。我不确定有什么可以帮助我，因为我只涉及了表格的样式，而不是它们的元素，而且表格仍然填充了其div的100%宽度，如边框所示（见下文）

我将介绍一个最简单的工作示例：

<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>

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

提前谢谢

问题在于将

flex

添加到table元素时。您的

按钮

元素将采用100%的宽度，但在应用flex后，

td

元素的宽度最小


喷射机

您可以尝试使用

对齐项目：拉伸并始终将flex放在桌面上
另外，我建议使用classList在元素上添加和删除类，而不是直接更改样式。
如果您尝试删除所有for循环，最好先用一个元素来完成。谢谢，我这么做了。现在应该更具可读性了，不过结果是一样的。谢谢，在适当的位置添加/删除类时，只需创建一些display=none的“不可见”类就可以了！
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";
}