使用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. 單擊而不是鼠標懸停時將打開下拉菜單。
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/