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放在#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放入#response div中，就像namkha87所说的那样。

如何点击.hover（）之后显示的div的链接

2 个答案: