网页中点击元素时弹出对应的元素,再点时则关闭,来个看看问题错在哪,给改改

      <% 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循环如何改。