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

时间:2014-07-25 01:01:24

标签: javascript jquery html css twitter-bootstrap

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

看到这张图片

Dropdown menu

我决定生成动态菜单,而不是创建大量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/

2 个答案:

答案 0 :(得分:1)

使用一些CSS怎么样? :)

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

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

答案 1 :(得分:1)

您可以按$('.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/