Einfache Javascript-Umschalt-Div-Funktion

Aug 15 2020

Ich habe einen Code geschrieben, der mein div mit einem anderen Menü auslöst. Ich weiß nicht, welches besser ist und verwendet werden sollte. Kann ich Feedback bekommen?

Erster Code in einer Funktion:

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";
}
}

Zweiter Code mit zwei Funktionen, aber macht die gleiche Arbeit:

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";
    }

Antworten

3 LucasWauke Aug 19 2020 at 09:57

Ich denke, das ist einfacher zu schreiben und die Zustandsänderung zu verstehen, wenn Sie nicht über die Grenzfälle nachdenken müssen.

Im ersten Fall starten Sie bereits in dem gewünschten Zustand und müssen nur noch die beiden Zustände invertieren. Im zweiten müssen Sie nur alle Zustände "ausschalten" und den gewünschten "einschalten".

Ich denke, das ist einfacher, wenn Sie so denken.

Zwei Seitenleisten

Ich denke, dass Sie DOMTokenList.toggle() verwenden können :

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>

Dokumente:

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

Mehr als zwei Seitenleisten

Vielleicht kann Toggle in diesem Fall nicht nützlich sein. Ich denke jedoch, dass Datensätze hilfreich sein könnten

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>


1 gyfchong Aug 18 2020 at 18:53

Wenn ich mich zwischen deinen 2 Methoden entscheiden müsste, würde ich mich für die zweite Methode entscheiden.

Sie sollten immer auf der Seite der Lesbarkeit und auch des Single-Responsibility-Prinzips irren .

Aber wenn ich eine Alternative zu Ihrem ursprünglichen Code vorschlagen müsste, würde ich die Verwendung von CSS-Klassen vorschlagen.

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>

Diese Methode verwendet im Wesentlichen CSS-Klassen als eine Art dauerhaften Zustand, was zur Vereinfachung Ihrer JS-Logik beiträgt und auch die Wiederholung Ihres Codes reduziert ( es bleibt trocken ) UND es ist unendlich wiederverwendbar für so viele Menüs, wie Sie möchten! :)

Ein weiterer Pluspunkt ist, dass Sie jetzt auswählen können, ob eines Ihrer Menüs standardmäßig geöffnet sein soll, und leistungsfähigere Animationen in CSS anwenden.

Hoffe das hat geholfen.