javascript - Bootstrap 关闭一个 div 调整另一个大小

Question

我使用 Bootstrap 3 作为我网站的框架。

通过这段代码，我在页​​面上显示了 2 个元素(div A 和 div B)，每个元素的宽度为屏幕尺寸的 50%。

<div class="row">
    <div class="col-lg-6" id="A"></div>
    <div class="col-lg-6" id="B"></div>
</div>

我想通过单击按钮/元素关闭 div B 并将 div A 调整为屏幕的 100% 宽度。如何使用 Bootstrap 做到这一点？是否有内置的 CSS 或 JavaScript 方式？

Answer 1

首先，您没有正确结束 DIV。而不是 </div你应该使用 </div> .然后，你可以用一些 jQuery 做你想做的事情，假设将被点击的按钮有一个 button。编号:

$("#button").click(function(e) {
    e.preventDefault();

    $("#B").hide();
    $("#A").removeClass("col-lg-6").addClass("col-lg-12");
});

http://jsfiddle.net/juu60dbu/

或者，如果您想使用纯 JavaScript 来完成:

document.getElementById("button").onclick = function() {
    document.getElementById("B").style.display = "none";

    document.getElementById("A").className = "";
    document.getElementById("A").className = "col-lg-12";
};

http://jsfiddle.net/g8k55deg/