javascript - 如何让对应的ul标签可见？

Question

我创建了如下 html

<input id="<code generated id>" type="text" value="select"/>
<div id="<code generated id>" class="popup">
   <ul id="<code generated id>" class="none">
      <li>A</li>
      <li>B</li>
      <li>C</li>
   </ul>
</div>
...
...
...
<>
<input id="<code generated id>" type="text" value="select"/>
<div id="<code generated id>" class="popup">
   <ul id="<code generated id>" class="none">
      <li>A</li>
      <li>B</li>
      <li>C</li>
   </ul>
</div>
.none
{
display:none;
}

请注意，该 html 部分在渲染后会在浏览器中重复。现在我希望每当单击文本框(输入)时，它对应的 ul标签应该可见。

Answer 1

如果你不想使用Javascript，你可以使用css焦点选择器来实现

.none {
    display:none;
}
input:focus + div.popup >ul {
    display:block;
}

演示- http://jsfiddle.net/pn2hpkkg/