[英]JavaScript Accordion Menu with querySelectorAll()
我正在尝试使用querySelectorAll()
构建手风琴菜单,但不确定哪种最佳方法是检查单击列表项的子级 ( .toggleContent
和.toggleIcon
)是否属于其单击父级toggle_li[i]
。
如果我错了,请纠正我,但是我认为在onclick
函数中进行控制比影响toggleDataAttr
函数更灵活?
我仍然对querySelector还是陌生的,因此不胜感激。
codepen: http ://codepen.io/seejaeger/pen/qdqxGy
// data attribute toggle
var toggleDataAttr = function (toggleElem, opt1, opt2, dataAttr) {
//
// ? belongs to clicked element (parent toggle_li[i])?
//
var toggleElem = document.querySelector(toggleElem);
toggleElem.setAttribute(dataAttr,
toggleElem.getAttribute(dataAttr) === opt1 ? opt2 : opt1);
};
// declare toggle onclick element
var toggle_li = document.querySelectorAll('li');
// iterate query and listen for clicks
for (var i = 0; i < toggle_li.length; i++) {
toggle_li[i].onclick = function() {
//
// ? belongs to clicked element (parent toggle_li[i])?
//
toggleDataAttr('.toggleContent', 'closed', 'open', 'data-state');
toggleDataAttr('.toggleIcon', 'plus', 'minus', 'data-icon');
};
}
我认为这是您应该做的:
toggleDataAttr
函数,以接收另一个参数parentElem
。 parentElem
用作querySelector
而不是toggleDataAttr
的document
。 this
作为参数传递给parentElem
。 片段:
var toggleDataAttr = function(parentElem, toggleElem, opt1, opt2, dataAttr) { var toggleElem = parentElem.querySelector(toggleElem); toggleElem.setAttribute(dataAttr, toggleElem.getAttribute(dataAttr) === opt1 ? opt2 : opt1); }; var toggle_li = document.querySelectorAll('li'); for (var i = 0; i < toggle_li.length; i++) { toggle_li[i].onclick = function() { toggleDataAttr(this, '.toggleContent', 'closed', 'open', 'data-state'); toggleDataAttr(this, '.toggleIcon', 'plus', 'minus', 'data-icon'); }; }
body { background: #034; opacity: 0.9; font-family: sans-serif; font-size: 24px; font-weight: 300; letter-spacing: 2px; } ul { list-style: none; padding: 0 24px; width: 30%; overflow: hidden; color: #333; } li { background: #eee; padding: 0px; border-bottom: 2px solid #aaa; } i { font-style: normal; } .li-label { padding: 18px; } .toggleContent { padding: 18px 14px; border-top: 2px solid #bac; background: #334; color: #eee; } .toggleContent[data-state=closed] { display: none; } .toggleContent[data-state=open] { display: block; } .toggleIcon[data-icon=plus]:after { content: '+'; float: right; } .toggleIcon[data-icon=minus]:after { content: '-'; float: right; }
<ul> <li> <div class="li-label"> list item one <i class="toggleIcon" data-icon="plus"></i> </div> <div class="toggleContent" data-state="closed">toggle content one</div> </li> <li> <div class="li-label"> list item two <i class="toggleIcon" data-icon="plus"></i> </div> <div class="toggleContent" data-state="closed">toggle content two</div> </li> <li> <div class="li-label"> list item three <i class="toggleIcon" data-icon="plus"></i> </div> <div class="toggleContent" data-state="closed">toggle content three</div> </li> </ul>
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.