Div下降和上升

时间:2013-10-16 06:40:13

标签: jquery html dropdownbox

使用以下脚本获取我点击它时下拉的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");
});
});

1 个答案:

答案 0 :(得分: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/