В анимированном списке с фильтром вложенные подсписки 3го уровня накладываются поверх следующего второго (файл используется на мобильном устройстве):
Что не так с разметкой?
<style>
body { margin: 0; font: .9em lucida grande, helvetica, sans-serif }
header { padding: 1em 1.4em; background: #f3f3f3; border-bottom: 1px solid #ddd }
input { padding: .4em }
li { list-style: none; padding: 1.2em 0; border-bottom: 1px solid #eaeaea; color:rgba(0,0,0,.6); text-shadow:rgba(0,0,0,.2) 2px 6px 5px,rgba(255,255,255,.4) 0 -4px 30px; }
</style>
<header>
<input placeholder=Search autofocus class=search><!-- search.js input -->
</header>
<ul class=search>
<li>JavaScript</li>
<li>Java</li>
<li>jQuery</li>
<li>AngularJS</li>
<li>ReactJS</li>
<ul>
<li>Submunu 1</li>
<ul>
<li>Submenu 1.2</li>
</ul>
</ul>
<ul>
<li>Submenu 2</li>
</ul>
<ul>
<li>Submenu 3</li>
</ul>
<li>Bootstrap</li>
<li>PHP</li>
<li>Python</li>
</ul>
<script>
document.addEventListener("DOMContentLoaded", function() {
"use strict"
var style = ""
+ "<style>"
+ "input.search {"
+ "-webkit-tap-highlight-color: transparent;"
+ "}"
+ ".search .hidden {"
+ "opacity: 0;"
+ "pointer-events: none;"
+ "}"
+ ".search > * {"
+ "position: absolute;"
+ "transition: .5s;"
+ "}"
+ "</style>"
document.head.insertAdjacentHTML("beforeend", style)
var items = document.querySelectorAll(".search > *")
var itemHeight = items[0].offsetHeight
var texts = []
var i = -1
var len = items.length
var transform = "transform" in document.body.style ? "transform" : "webkitTransform"
while (++i < len) {
texts.push(items[i].textContent.trim())
items[i].style[transform] = "translateY(" + i*itemHeight +"px)"
}
document.querySelector("input.search").addEventListener("input", function() {
var re = new RegExp(this.value, "i")
texts.forEach(function(element, index) {
if (re.test(element)) {
items[index].classList.remove("hidden")
}
else {
items[index].classList.add("hidden")
}
var i = -1
var position = 0
while (++i < len) {
if (items[i].className != "hidden") {
items[i].style[transform] = "translateY(" + position++ * itemHeight + "px)"
}
}
})
})
})
</script>
И сразу второй вопрос. Как сделать вложенные списки изначально скрытыми и раскрытие происходило по клику родителя? Спасибо.
display: none
li
уSubmunu 1
в котором есть под список?