jquery - div 下拉和向上

Question

有以下脚本来获取当我单击它时下拉的 div。但是，如果您在 div 之外单击，您怎么能做到这一点：a？

jsfiddle.net

html

<div id="favorite_holder">
   <span class="price">click here</span>
</div>
<div id="favorite_container" style="display: none;">
    content here...
</div>

css

#favorite_holder {
padding:17px 6px 1px 6px;
font-size:12px;
text-align:center;
background:url(../img/icon_favorite.png) top center no-repeat #fff;
border-right:1px dotted #dddddd;
cursor:pointer;
}
#favorite_container {
position:absolute;
right:0px;
z-index:9;
width:336px;
margin:0px 0px 0px -87px;
padding:0px 0px 0px 0px;
font-size:12px;
color:#202020;
background:#fff;
-moz-box-shadow: 0 0px 6px rgba(0,0,0,0.1) !important;
-webkit-box-shadow: 0 0px 6px rgba(0,0,0,0.1) !important;
box-shadow: 0 0px 6px rgba(0,0,0,0.1) !important;
}

jQuery

/* menu - favorite */
$(document).ready(function() {
$('#favorite_holder').click(function() {
    $('#favorite_container').slideToggle("fast");
});
});

Answer 1

试试下面的代码。

$('#favorite_holder').click(function(e) {
    $('#favorite_container').slideToggle("fast");
    e.stopPropagation();
});

$(document).click(function(){
    $('#favorite_container').slideUp("fast");
});

演示：http: //jsfiddle.net/GVYEd/3/

2个div：http: //jsfiddle.net/GVYEd/6/