如何单击在 .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>

Jquery：

  $("#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 放在 #responsediv 中

演示：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所说的那样。