Question

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

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

和

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

我想，当我点击CHANGE时，在前面获得user_adr div。 Ajax或其他解决方案。我尝试了jQuery .load函数，但它不起作用。我怎么能这样做？

Demo

Answer 1

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

<强> Live Demo

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

Answer 2

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

<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>

Answer 3

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

$('.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');

Answer 4

如果有任何其他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();
});

单击另一个div时打开div

4 个答案: