Javascript 仅当下拉菜单打开时显示div？

我需要一个特定的div，只有在特定的下拉列表打开时才可见。我能做的最接近的事情就是让div节目改变，但这不是我需要的。当下拉列表关闭时，div应该和它一起隐藏，那么绑定是什么呢？有什么想法吗？提前谢谢

HTML

    <select class='ddInfo'> 
        <option>option 1</option>
        <option>option 2</option>
        <option>option 3</option>
    </select> 


<div class='info'>
    only showing while dropdown is open
</div>  

---

将jQuery中的focusOut事件与click事件结合使用

$('.ddInfo').on('click', function () {
    $('.info').show();    

}))

---

fiddle中的示例：

此功能适用于fiddle，即使选择了此选项也可以正常工作

$('.ddInfo').click(function(){
    $('.info').toggle();
});

$('.ddInfo').blur(function(){
    $('.info').toggle();
});

编辑并检查更新的小提琴链接

---

谢谢即使在我使用的小部件上也能完美工作。它在Chrome中为我工作？还有一件事。如果用户将鼠标悬停在div上，或者将注意力集中在div上，我们是否可以让div可见？

$('.ddInfo').on('focusout', function () {
    $('.info').hide();
});

$('.ddInfo').click(function(){
    $('.info').toggle();
});

$('.ddInfo').blur(function(){
    $('.info').toggle();
});

$('.ddInfo').click(function(){
    $('.info').toggle();
});

$('.ddInfo').hide(function(){
    $('.info').toggle();
});