In the animated filter list, nested sub-lists of the 3rd level are superimposed over the next second (the file is used on the mobile device): screen

What is wrong with markup?

<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>



And immediately the second question. How to make nested lists initially hidden and disclosure took place at the click of the parent? Thank.



  • The markup is all right with you. The problem is in the styles for this list. Google for something like a drop-down menu on css. The answer to the second question immediately comes. They just need to be made initially hidden display: none - Sergey
  • @ Sergey, where did you get that everything is in order? But what about the closed li tag in Submunu 1 which has a list? - Vasily Barbashev
  • @core Correct the markup, as I wrote in the comment above - Vasily Barbashev
  • Removed the closed tag, but the display did not affect. At random, I found out that the conflict comes from the position: absolute style; In js, but I do not know how to fix it. Without this attribute, the list items "crawl away". - core

1 answer 1

Correct the markup:

 <ul> <li>Submunu 1</li> <!-- закрытый тег --> <ul> <li>Submenu 1.2</li> </ul> </ul>

On:

 <ul> <li> Submunu 1 <ul> <li>Submenu 1.2</li> </ul> </li> <!-- должен быть здесь --> </ul>

Made an example the same as yours, only without JS. Using the animate.css library. You can take animate.css certain animation styles that you need and use if you don’t want to ship the entire library. It is not clear why you use JS ...

Ready example: http://codepen.io/bustexz/pen/reoYGb

  • Now, like this - core
  • @core is now correct, just now set the styles for the menu and under the menu, and everything will be fine. And position: absolute; it is better not to use, and it is not clear why. jsfiddle.net/x1s3e4p6 I'm fine - Vasily Barbashev
  • @core updated the answer - Vasily Barbashev
  • Basil, on a mobile device, if you do not move the </ li> tag and disable the script file, it turns out that the third level of the list is displayed even more correctly . But as soon as you connect the script - both options are distorted. If you remove the position from the script, the list also goes down. Maybe this is a feature of mobile browsers .. - core
  • @core have you seen me change the answer? what did you add to it? what did you remove? Everything should work. I simply deleted your script, because it is not clear why he is needed at all - Vasily Barbashev