使用jquery在鼠标悬停时自动生成引导下拉菜单

Question

我正在尝试生成动态bootstrap 3下拉菜单，以便在鼠标悬停时共享。

看到这张图片

我决定生成动态菜单，而不是创建大量HTML代码。以下是我到目前为止所做的事情：

HTML

<div class="dropdown dropup" >
    <a href="#" class="open-dropdown" data-link="http://google.com">Dropdown</a>
    <ul class="dropdown-menu" role="menu">
        <li id="link1">Link One</li>
        <li id="link2">Link Two</li>
        <li class="caret"></li>
    </ul>
</div>

JQuery的

$(function() {
    $('.open-dropdown').hover(function(){
        $('#link1').html("Share link 1 "+$(this).data('link'));
        $('#link2').html("Share link 2 "+$(this).data('link'));
        $('.open-dropdown').dropdown();
    });
});

问题

1. 打开下拉菜单，点击不在MOUSE HOVER上。
2. 我无法将<ul class="dropdown-menu" role="menu">代码放在<div class="dropdown dropup">容器之外。请参阅此jsfiddle http://jsfiddle.net/LTk3x/

Answer 1

使用一些CSS怎么样？ ：）

.dropdown:hover .dropdown-menu{
    display: block;    
}

这是一个jsFiddle：
http://jsfiddle.net/hMp2r/

Answer 2

您可以按$('.open-dropdown').dropdown();

更改$('.dropdown-menu').toggle();

$(function() {
    $('.open-dropdown').hover(function(){
        $('#link1').html("Share link 1 "+$(this).data('link'));
        $('#link2').html("Share link 2 "+$(this).data('link'));
        $('.dropdown-menu').toggle();
    });
});

请参阅http://jsfiddle.net/32xLc/1/