Простая функция переключения div в javascript

Question

Я написал код, который запускает мой div с другим меню. Я не знаю, какой из них лучше и стоит использовать. Могу я получить обратную связь?

Первый код в одной функции:

function sidebar() {
var menu = document.querySelector('#sidebar-container');
      var menuSmall = document.querySelector('#sidebar-container2');
      var icon = document.getElementById('right');
      menuSmall.style.display = "block";
      menu.style.display = "none";
      if(menu.style.display == "none") {
        icon.onclick = function () {
          menu.style.display = "block";
          menuSmall.style.display = "none";
}
}

Второй код с двумя функциями, но выполняет ту же работу:

function sidebar() {
      var menu = document.querySelector('#sidebar-container');
      var menuSmall = document.querySelector('#sidebar-container2');
      menuSmall.style.display = "block";
      menu.style.display = "none";
        
    },
    function openbar() {
      var menu = document.querySelector('#sidebar-container');
      var menuSmall = document.querySelector('#sidebar-container2');
      menuSmall.style.display = "none";
      menu.style.display = "block";
    }

Answer 1

Я думаю, что легче написать и понять изменение состояния, если вам не нужно думать о крайних случаях.

В первом случае вы уже начинаете в желаемом состоянии, и вам нужно только инвертировать оба состояния. Во втором вам просто нужно «выключить» все состояния и «включить» то, что вы хотите.

Я думаю, что это проще, если вы так думаете.

Две боковые панели

Я думаю, что вы можете использовать DOMTokenList.toggle () :

const sidebars = document.querySelectorAll('.sidebar');
const icon = document.getElementById('icon');

const toggle = el => el.classList.toggle('hidden');

icon.addEventListener('click',() => sidebars.forEach(toggle));

/* the display value of a div is block by default */
.hidden {
  display: none;
}

<!-- you don't need to find which sidebar is open in your js -->
<div class="sidebar">first</div>
<div class="sidebar hidden">second</div>
<span id="icon">icon</span>

Документы:

• DOMTokenList
• Element.classList
• DOMTokenList.forEach ()

---

Более двух боковых панелей

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

const sidebars = document.querySelectorAll('.sidebar');
const btns = document.querySelectorAll('.btn');

const getSidebar = btn => btn.dataset.sidebar;

const hide = el => el.classList.add('hidden');

btns.forEach(btn =>
  btn.addEventListener('click', () => {
    const target = document.getElementById(getSidebar(btn));
    sidebars.forEach(hide);
    target.classList.remove('hidden');
  })
);

.hidden {
  display: none;
}

<div class="sidebar" id="first">sidebar 1</div>
<div class="sidebar hidden" id="second">sidebar 2</div>
<div class="sidebar hidden" id="third">sidebar 3</div>
<button class="btn" data-sidebar="first">1</button>
<button class="btn" data-sidebar="second">2</button>
<button class="btn" data-sidebar="third">3</button>

---

Answer 2

Если бы мне пришлось выбирать между вашими двумя методами, я бы выбрал второй метод.

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

Но если бы я предложил альтернативу вашему исходному коду, я бы предложил использовать классы CSS.

function toggleMenu(selectedMenu) {
  // Grab the currently open menu
  var openMenu = document.querySelector('.js-menu-open');
  
  // Grab the menu you want to open
  var targetMenu = document.querySelector(selectedMenu);

  // Scenario 1: a menu is already open
  // Close the open menu.
  if(openMenu) {
    openMenu.classList.replace('js-menu-open', 'js-menu-closed');
  }
  
  // Secnario 2: if the menu you are trying to open isn't the currently open menu
  // Open the target menu.
  if(openMenu !== targetMenu) {
    targetMenu.classList.replace('js-menu-closed', 'js-menu-open');
  }
  
}

.js-menu-closed {
  display: none;
}

.js-menu-open {
  display: block;
}

<div id="sidebar-container" class="js-menu-closed">
  Sidebar 1
</div>

<div id="sidebar-container2" class="js-menu-closed">
  Sidebar 2
</div>

<div id="sidebar-container3" class="js-menu-closed">
  Sidebar 3
</div>

<button onclick="toggleMenu('#sidebar-container')">Toggle sidebar 1</button>
<button onclick="toggleMenu('#sidebar-container2')">Toggle Sidebar 2</button>
<button onclick="toggleMenu('#sidebar-container3')">Toggle sidebar 3</button>

Этот метод по существу использует классы CSS как своего рода постоянное состояние, которое помогает упростить вашу логику JS, а также уменьшает повторение вашего кода (сохраняя его СУХИМ ) И его можно бесконечно многократно использовать для любого количества меню, которое вы хотите! :)

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

Надеюсь, это помогло.