Question

嗨我的代码有问题，我的页面中有菜单和地图，当页面加载地图时col-lg-10 col-md-10 col-sm-10 col-xs-10，因为我的菜单打开，当我关闭菜单时我做了那个地图更改为col-lg-12 col-md-12 col-sm-12 col-xs-12，它工作正常，但当我重新打开菜单时，它不会将类更改为col-lg-10 col-md-10 col-sm-10 col-xs-10。

这是我试过的代码

更新

感谢大家的回答，我添加了==，但现在它只放了col-lg-10类

 function MapSize() {
        var shown = document.getElementById("containerForm");
        var map = document.getElementById("containerMap");

        if (shown.style.display == "none") {

            map.className = "col-lg-12 col-md-12 col-sm-12 col-xs-12";


        } else if (shown.style.display == "block") {
            map.className += "col-lg-10 col-md-10 col-sm-10 col-xs-10";
        }
    }

谢谢：）

Answer 1

您在if语句中使用赋值运算符。

而不是

if (shown.style.display = "none")

应该是

if (shown.style.display == "none")

Answer 2

分配运算符，而不是if：

中的比较

 if (shown.style.display = "none") {

使用==

Answer 3

function MapSize() {

        var shown = document.getElementById("containerForm");
        var map = document.getElementById("containerMap");

        if (shown.style.display == "none") {

            map.className = "col-lg-12 col-md-12 col-sm-12 col-xs-12";


        } else if (shown.style.display == "block") {
            map.className = "col-lg-10 col-md-10 col-sm-10 col-xs-10";
        }
    }

有一个以上的问题：

1）使用===进行相等性检查 if (shown.style.display === "none")应为(shown.style.display === "none")

2）当你map.className = "col-lg-12 col-md-12 col-sm-12 col-xs-12";时，你的旧课程col-lg-10 col-md-10 col-sm-10 col-xs-10消失了。您可以打开chrome dev工具来检查类名。

使用map.className +=代替map.className =

3）map.className.remove是一个功能吗？请打开开发工具以检查错误。

Answer 4

试试这种方式

function MapSize() {
    var shown = document.getElementById("containerForm");
    var map = document.getElementById("containerMap");

    map.className = (shown.style.display === "none") ? "col-lg-12" : "col-lg-10";
}

BTW，在bootstrap 3中，"col-lg-12 col-md-12 col-sm-12 col-xs-12"等级"col-lg-12"等于"col-lg-10 col-md-10 col-sm-10 col-xs-10"等于"col-lg-10"

切换div时添加和删除类

4 个答案: