간단한 자바 스크립트 토글 div 기능

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 ()

---

2 개 이상의 사이드 바

이 경우 토글이 유용하지 않을 수 있습니다. 그러나 데이터 세트 가 도움이 될 것이라고 생각합니다.

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 로직을 단순화하고 코드 반복을 줄이며 ( DRY 유지 ) 원하는만큼 많은 메뉴에 대해 무한히 재사용 할 수 있습니다! :)

다른 장점은 이제 메뉴 중 하나를 기본적으로 열도록 선택할 수 있고 CSS에서 더 성능이 뛰어난 애니메이션을 적용 할 수 있다는 것입니다.

이것이 도움이 되었기를 바랍니다.