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/

Answer 2

尝试此操作（将类show_ul添加到输入中）：

// Document ready
jQuery(document).ready(function(){

    jQuery('input.show_ul').bind('focus', function() {

        // Hide uls
        jQuery('ul.none').hide();

        // Show ul
        jQuery(this).next().children().show();

    });

});

http://jsfiddle.net/g1c138tb/

Answer 3

<input id="<code generated id>" type="text" value="select" onclick="makeVisible(<code generated id>)"/>

<script type="text/javascript">
function makeVisible(inputId){
    $("inputId").closest("ul").css({"display":"block"});
}

试试这个..希望它适合你

Answer 4

你需要一些javascript编程才能做到这一点...... 在此之前更改标记如下

<div id="<code generated id>" class="popup">
    <input id="<code generated id>" type="text" value="select"/>
    <ul id="<code generated id>" class="none">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    </ul>
</div>

现在要显示相应的<ul>，请使用Jquery使用以下代码。

步骤1.在头文件中的HTML文档中加载Jquery库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

第2步。在头部写下以下几行。

<script> 
$("div input").click(function(){
     $(this).next().css("display","block");
})
</script>

检查演示小提琴 - ＆gt; https://jsfiddle.net/dy615u63/

希望它对你有所帮助。

如何使相应的ul标签可见？

4 个答案: