Добавить и удалить класс при переключении div

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.

Это код, который я пробовал

UPDATE

Спасибо всем за ваши ответы, я добавил ==, но теперь он ставит только 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

Попробуйте вот так

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

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

Кстати, в начальной загрузке 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"

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 проблемы:

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, чтобы проверить имя класса.

Используйте map.className += вместо map.className =

3) Является ли map.className.remove функцией? Пожалуйста, откройте инструмент dev для проверки на наличие ошибок.

Answer 4

Вы используете операторы присваивания в своем операторе if.

Вместо того, чтобы

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

должно быть

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