Question

嘿，我想要做的是：

我有不同的按钮用于浏览器游戏的关卡选择。每个按钮代表一个级别。在用户选择一个级别后，他必须单击“开始”按钮以转到所选级别。 var level获取特定级别按钮的值。例如用户选择第一级，因此var level = 1;

当他点击START按钮而没有选择等级时，会出现一个包含内容的弹出窗口＆＃34;首先选择一个级别＆＃34;。要通过单击任意位置或单击级别按钮来隐藏弹出窗口，请使用以下代码。在开头var level = undefined，然后才能调用popover。用户选择后，var level级别不再是未定义的，并且无法再次调用popover。

到目前为止一切顺利。

通过单击“开始”按钮而不选择级别来显示弹出窗口，并通过选择级别消失。但是当用户现在点击START按钮时，弹出窗口再次出现。这怎么可能？

$('#start').bind("click touchstart", function(e) {
    if (level==undefined) {
        $('#start').popover();
        isVisible = true;
        clickAway = false;
        e.preventDefault();
    }
});

$(document).bind("click touchstart", function() {
    if(isVisible && clickAway) {
        $('#start').popover('hide');
        isVisible = false;
        clickAway = false;
    } else {
        clickAway = true;
    }
});

<button type="submit" class="btn btn-success btn-large" rel="popover" data-placement="left" data-content="Choose level first!" value="" id="start" name="start">START!</button>

Answer 1

快速解决方法是将$('#start').popover('hide');更改为$('#start').popover('destroy'); 同时将data-trigger="manual"添加到按钮

以下是我实施此方案的方式，

 $(document).bind("click touchstart", function(f) {
  if(f.target.id!="start"){
   if(isVisible)
   {
     $('#start').popover('destroy');
     isVisible = false;
   }
  }  
   else if (level==undefined && !isVisible) {       
    $('#start').popover('show');
    isVisible =true;
  }  
  });

出现Bootstrap popover虽然它应该被隐藏

1 个答案: