Question

为了实现移动鼠标时弹出菜单保持“向上”的行为，我使用了以下脚本：

<script>
 $(function(){
    $('[rel=popover]').popover({ 
      trigger: "manual",
      animation: false,
      html : true,
      content: function() {
         return $('.popover').html();
      },
      container: 'body'

    })
    .on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    })
    .on("mouseleave", function() {
        var _this = this;
        setTimeout(function () 
        {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 300);
    })

  });

  $(function(){
    $('[rel=popoversturen]').popover({ 
      trigger: "manual",
      animation: false,
      html : true,
      content: function() {
         return $('.popover#sturen').html();
      },
      container: 'body'

    })
    .on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");
        $(".popover#sturen").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    })
    .on("mouseleave", function() {
        var _this = this;
        setTimeout(function () 
        {
            if (!$(".popover#sturen:hover").length) {
                $(_this).popover("hide");
            }
        }, 300);
    })

  });


</script>

但是如果在第一个函数中我的第二个rel = popoversturen中的一切都没问题，那么当你在内容上移动鼠标时它就不会显示。

下面是html代码：

<li class="menu">
    <a href="#" rel="popoversturen" data-content="" data-placement="bottom" data-trigger="hover">
        Sturen
    </a>
</li>
<li>
    <a href="#">
        Ontvangen
    </a>
</li>
<li>
    <a href="#" rel="popover" data-content="" data-placement="bottom" data-trigger="hover">
        Zakelijke oplossingen
    /a>
</li>

我希望能够在没有菜单消失的情况下转到链接。

这里 Fiddle Demo

Answer 1

为了您的点击目的，我创建了一个示例请在此处查看代码，下面我已经为工作代码提供了示例

   $('[data-toggle="popover"]').popover({
        html:true,
        content : function() {
             $('#clickGoogle').css({'display':'block'});
             return $('#clickGoogle');
        }        
    });

#clickGoogle{
    width:100px;
    border:1px solid #456334;
    background-color:white;
}

<div class="container">
  <h3>Popover Example</h3>
  <a href="#" data-toggle="popover" title="Popover Header">Toggle popover</a>
</div>
<div id="clickGoogle" style="display:none;">
<a href="www.google.com">Click For Google </a>
</div>

我在这里提供演示工作代码

Demo Working Jsfiddle

Answer 2

选择器我错了。

在第二种情况下，我必须使用相同的选择器：#popover用于两个调用：mouseenter和mouseleave函数。

所以，代码已经以这种方式改变了：

$(function(){
    $('[rel=popoversturen]').popover({ 
      trigger: "manual",
      animation: false,
      html : true,
      content: function() {
         return $('.popover#sturen').html();
      },
      container: 'body'

    })
    .on("mouseenter", function() {
        var _this = this;
        $(this).popover("show");
        $(".popover").on("mouseleave", function () {
            $(_this).popover('hide');
        });
    })
    .on("mouseleave", function() {
        var _this = this;
        setTimeout(function () 
        {
            if (!$(".popover:hover").length) {
                $(_this).popover("hide");
            }
        }, 300);
    })

  });

弹出用于Bootstrap中的菜单

2 个答案: