1

私はhtml構造を持っています。以下を使用します。

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

と：

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

CHANGEをクリックすると、user_adr前面にdivが表示されます。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 に答える