JS, CSS Menubar Toggle

Question

Здравствуйте, я хочу, чтобы это меню выходило из стороны, когда я нажимаю кнопку. Я все это настроил с помощью CSS, но часть Javascript не работает. Я хочу проверить, равна ли ширина menubarWrapper, тогда ширина menubarWrapper должна быть изменена на 0px и если она не равна 300px, а измените ее на 300 пикселей. У меня есть следующий JS:

function menuBarToggle() { 
var menuWrapper = document.getElementById('menuWrapper'); 
if menuWrapper.width == 300 { 
    menuWrapper.style.width = "0"; 
} else { 
    menuWrapper.style.width = "300"; 
    } 
} 

Я также попытался в заявлении IF menuWrapper.style.width, но это не работает также

Answer 1

Есть другие ответы, которые просто отлично -

• использование "300px", а не "300"
• окружить условно с круглыми скобками.

(Вы будете нуждаться в обоих, кстати.)

Но я хотел, чтобы убедиться, что где-то на этой странице, кто-то отметил, что это очень хрупкий путь переключая. У вас есть магическое, жестко закодированное целое число для размера, которое может сломаться, если вы когда-либо хотели по-другому стилизовать вещи. И если вы решите, что в один прекрасный день исчезнет меню, тогда тест не будет работать вообще.

Я мог бы предположить, что, вместо этого, вы создаете два класса в CSS:

.menu-item { width: 300px; } 
.menu-item.collapsed { width: 0; } 

А потом в JavaScript, вы будете иметь только написать следующее:

function menuBarToggle() { 
    var menuWrapper = document.getElementById('menuWrapper'); 
    menuWrapper.classList.toggle('collapsed');  
} 

не только цель легче читать, но это позволит вам поменять поведение, если вы решите, что вместо сужения меню вы можете захотеть, чтобы оно исчезло или анимировало его слева, или ... ну .. все, что может придумать.

Answer 2

При изменении width элемента через style.width, вы должны приложить px к конец строки:

function menuBarToggle() { 

    var menuWrapper = document.getElementById('menuWrapper'); 
    if menuWrapper.width == 300 { 
     menuWrapper.style.width = "0px"; 
    } else { 
     menuWrapper.style.width = "300px"; 
     } 
    } 

Answer 3

В вашем скрипте есть опечатка. Добавьте '()' для оператора if.

function menuBarToggle() { 
    var menuWrapper = document.getElementById('menuWrapper'); 
    if (menuWrapper.width == 300) { 
     menuWrapper.style.width = "0"; 
    } else { 
     menuWrapper.style.width = "300"; 
    } 
}