0

リンクにカーソルを合わせた後、1 つの div を表示しています。新しいdivのリンクの1つをクリックしたいのですが、リンクをクリックした後、divを非表示にする必要があります。

http://jsfiddle.net/xrcwrn/MEdRy/htmlでコードを確認できます 。

<div id="response">
            <a href="#">Response Request</a>
        </div>
    <div class="new_r_div hidden">
     <ul>
        <li><a href="#">Confirm</a></li>
        <li><a href="#">Delete</a></li>
    </ul>
 </div>

Jクエリ:

  $("#response").hover(function(){
$('.new_r_div').removeClass('hidden');
},function(){
   $('.new_r_div').addClass('hidden');
});

CSS:

 .new_r_div{
     position:absolute;
    width:100px;
    height:40px;
    background:#ccc;
    overflow: hidden;
    border: solid 2px #ccc;
    background: #99CCFF;

}
.hidden{
  visibility: hidden;
}
4

2 に答える 2

2

非表示の div を #response div 内に配置してみてください

デモ: http://jsfiddle.net/MEdRy/4/

HTML:

<div id="response">
    <a href="#">Response Request</a>

    <div class="new_r_div hidden">
         <ul>
            <li><a href="#">Confirm</a></li>
            <li><a href="#">Delete</a></li>
        </ul>
     </div>
</div>

JS:

$("#response").hover(function(){
    $('.new_r_div').removeClass('hidden');
},function(){
    $('.new_r_div').addClass('hidden');
});

$("#response li a").click(function(){
     $('.new_r_div').addClass('hidden');
});
于 2013-01-28T07:44:23.107 に答える
0

非表示の div 内のリンクをクリックすると閉じる、更新された jsFiddle があります: http://jsfiddle.net/xrcwrn/MEdRy/

私はそれらを分離したので、両方のケースにさらに (AJAX) アクションを追加できます。

$("#confirm").click(function() {
  $('.new_r_div').addClass('hidden');
});

$("#delete").click(function() {
  $('.new_r_div').addClass('hidden');
});

namkha87 が言ったようdivに、div 内に非表示を配置します。#response

于 2013-01-28T07:49:44.710 に答える