Basit javascript geçiş div işlevi
Div'imi başka bir menü ile tetikleyen bir kod yazdım. Hangisinin daha iyi olduğunu ve kullanılması gerektiğini bilmiyorum. Geri bildirim alabilir miyim?
Bir işlevdeki ilk kod:
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";
}
}
İki işleve sahip ikinci kod, ancak aynı işi yapar:
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";
}
Yanıtlar
Uç vakalar hakkında düşünmeniz gerekmiyorsa, durum değişikliğini yazmanın ve anlamanın daha kolay olduğunu düşünüyorum.
İlk durumda, zaten istediğiniz durumda başlıyorsunuz ve yalnızca her iki durumu da tersine çevirmeniz gerekiyor. İkincisi, her durumu "kapatmanız" ve istediğiniz durumu "açmanız" yeterlidir.
Bence bu şekilde düşünürseniz daha basit.
İki kenar çubuğu
DOMTokenList.toggle () kullanabileceğinizi düşünüyorum :
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>
Dokümanlar:
- DOMTokenList
- Element.classList
- DOMTokenList.forEach ()
İkiden fazla kenar çubuğu
Belki bu durumda geçiş yararlı olamaz. Ancak, veri kümelerinin yardımcı olabileceğini düşünüyorum.
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>
2 yönteminiz arasında seçim yapmak zorunda kalsaydım, ikinci yöntemle giderdim.
Her zaman okunabilirlik ve ayrıca Tek Sorumluluk İlkesi tarafında hata yapmalısınız .
Ancak orijinal kodunuza bir alternatif önerecek olsaydım, CSS sınıflarının kullanımını öneririm.
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>
Bu yöntem esasen CSS sınıflarını bir tür kalıcı durum olarak kullanır, bu da JS mantığınızı basitleştirmeye yardımcı olur ve ayrıca kodunuzun tekrarını azaltır ( KURU olarak tutar ) VE istediğiniz kadar menü için sonsuza kadar yeniden kullanılabilir! :)
Diğer artılar, menünüzden herhangi birinin varsayılan olarak açılmasını seçebilmeniz ve CSS'de daha performanslı animasyonlar uygulayabilmenizdir.
Umarım bu yardımcı olmuştur.