Форум

Volonter · #1 (**permalink**) 01.06.2022, 11:32

Всем привет! Как более красиво и лаконично переписать такую функцию?

const toggleBtn = document.getElementById('toggle')
const sidebar = document.getElementById('sidebar')
const content = document.getElementById('content')
toggleBtn.addEventListener('click', sidecollapse, false)

function sidecollapse() {
    if (sidebar.classList.contains('col-3')) {
        sidebar.classList.remove('col-3')
        sidebar.classList.add('col-1')
    } else {
        sidebar.classList.remove('col-1')
        sidebar.classList.add('col-3')
    }


    if (content.classList.contains('col-9')) {
        content.classList.remove('col-9')
        content.classList.add('col-11')
    } else {
        content.classList.remove('col-11')
        content.classList.add('col-9')
    }
}

Заранее благодарен!

рони · #2 (**permalink**) 01.06.2022, 11:43

Volonter,
а полноценный макет никак? а описание, что делает функция нафига?

рони · #3 (**permalink**) 01.06.2022, 11:52

Volonter,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .col-1 {
        background-color: #FFFF00;
   }
   .col-3 {
        background-color: #FF0000;
   }
   .col-9{
       background-color: #8B4513;
   }
   .col-11{
       background-color: #0000FF;
   }
  </style>

  </script>
</head>

<body>
<div id="sidebar" class="col-3">sidebar</div>
<div id="content" class="col-9">content</div>
<input id="toggle" name="" type="button" value="toggle">
<script>
const toggleBtn = document.getElementById('toggle')
const sidebar = document.getElementById('sidebar')
const content = document.getElementById('content')
toggleBtn.addEventListener('click', sidecollapse, false)

function sidecollapse() {
    sidebar.classList.toggle('col-3');
    sidebar.classList.toggle('col-1');
    content.classList.toggle('col-11');
    content.classList.toggle('col-9');
}

</script>
</body>
</html>

Volonter · #4 (**permalink**) 01.06.2022, 12:35

рони,
не совсем то, мне надо чтобы если колонка имеет класс col-3 то менялось на col-1 и\или наоборот, при этом у контента соответственно col-9 на col-11 и\или наоборот. Это надо чтобы сворачивать бутстраповскую сетку

рони · #5 (**permalink**) 01.06.2022, 13:15

Сообщение от Volonter

мне надо чтобы если колонка имеет класс col-3 то менялось на col-1 и\или наоборот, при этом у контента соответственно col-9 на col-11 и\или наоборот.

что в коде не так?

Форум

Справочник

Discord чат

Курсы javascript