1

我有一个html结构。具有以下内容：

<div class="edit"><a class="formtri" href="#">CHANGE</a>

和：

  <div id="user_adr" style="display:none">

我想，当我单击更改时，将user_adrdiv 放在前面。Ajax 或其他解决方案。我尝试了 jQuery.load函数，但它不起作用。我怎样才能做到这一点？

演示

4

4 回答 4

4

您可以使用toggle()函数来显示/隐藏 html 元素。

现场演示

$('.edit').click(function(){
   $('#user_adr').toggle();
});
于 2013-03-01T09:41:23.393 回答
1

您可以使用jquery ui. dialog()方法来显示一个对话框。像这样。 jQuery 对话框

<script>
  $(function() {
    $( "#dialog" ).dialog({
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });

    $( "#opener" ).click(function() {
      $( "#dialog" ).dialog( "open" );
    });
  });
  </script>
</head>
<body>

<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>

<button id="opener">Open Dialog</button>
于 2013-03-01T09:40:29.117 回答
1

或者，您可以使用切换功能。

$('.edit').on('click',function(){
   $('#user_adr').toggle();
});

如果不切换。然后切换的替代方法是这样的。

$('.edit').on('click',function(){
if('#user_adr').is('visible'))
    {
         $('#user_adr').show();
    }
    else
    {
         $('#user_adr').hide();
    }
});

//将显示更改为无

$('#yourDivId).attr('display','none');
于 2013-03-01T09:42:17.197 回答
0

如果万一有任何其他具有相同类名的 div 编辑上述解决方案可能没有帮助，那么最好将唯一的 id 保留为“更改”

<div class="edit"><a class="formtri" id="change" href="#">CHANGE</a>

$("#change").on("click", function(){
$('#user_adr').show();
});    

$("#change").on("click", function(){
$('#user_adr').toggle();
});
于 2013-03-01T09:47:54.670 回答