jquery - 如何单击 .hover() 之后显示的 div 链接

Question

将鼠标悬停在链接上后，我正在显示一个 div。我想单击新 div 中的链接之一，单击任何链接 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>

查询：

  $("#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;
}

Answer 1

尝试将隐藏的 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');
});

Answer 2

这是一个更新的 jsFiddle，应该可以工作，在单击隐藏 div 内的链接时关闭：http: //jsfiddle.net/xrcwrn/MEdRy/

我已将它们分开，因此您可以为这两种情况添加更多 (AJAX) 操作。

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

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

并把隐藏div在#responsediv里面，就像namkha87说的那样。