JavaScript 带有 querySelectorAll() 的手风琴菜单

Question

我正在尝试使用 querySelectorAll() 构建手风琴菜单，但不确定检查 单击的列表项的子项 的最佳方法是什么（.toggleContent 和 .toggleIcon) 属于它被点击的父级 toggle_li[i]。

如果我错了请纠正我，但我假设在 onclick 函数中控制它比影响 toggleDataAttr 函数更灵活？

我还是 querySelector 的新手，所以非常感谢任何指导。

代码笔：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');
    };
}

Answer 1

这是我认为你应该做的：

更新您的 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>

希望对您有所帮助。

JavaScript 带有 querySelectorAll() 的手风琴菜单

JavaScript Accordion Menu with querySelectorAll()

javascript

toggle

accordion

custom-data-attribute

selectors-api