<% for i=1 to 5 %>
<p id="input_name1">点第<%= i %>个弹出下面对应的第<%= i %>个</p>
<!--下面的P标签默认隐藏-->
<p id="user_link1"><a href='javascript:void(0);'>第<%= i %></a>个</p>
<% next %>
<script type="text/javascript">
for (var n=0; n<5; n++)
{
var name1 = "#input_name"+n ;
var link1 = "#user_link"+n ;
var link2 = link1+" a";
$(document).ready(function() {
$(link1).hide(); //div默认隐藏
$(name1).click(function(e) {
$(link1).slideToggle();//点击输入框时,div下滑打开
e.stopPropagation();
});
$(link1).click(function(e) {
e.stopPropagation(); //点击弹出的div不做反应
});
$(link2).click(function(){
$(link1).hide(); //div消失
});
});
}
</script>
这个你可以参考一下菜鸟教程或者W3C的hide(),show(),Toggle();方法的使用
你html部分的id是固定的,没看出来是变化的啊。
其实没有必要加id,直接用class就能解决了,给p标签外面套个div,直接给input加click事件,用siblings()方法控制它的兄弟元素,这样循环多个就没有问题,不会影响到其他的。
<% for i=1 to 5 %>
<div class="list">
<p class="input_name">点第<%= i %>个弹出下面对应的第<%= i %>个</p>
<!--下面的P标签默认隐藏-->
<p class="user_link"><a href='javascript:void(0);'>第<%= i %></a>个</p>
</div>
<% next %>
$(function(){
$('.input_name').click(function(){
$(this).siblings('.user_link').slideToggle();
})
})
那个我知道,单个时没问题,但多个时,JS的循环就不行了,看看JS循环如何改。