Bootstrap Popover 需要第二次点击才能显示答案

【问题标题】：Bootstrap Popover Requires Second Click Before ShowingBootstrap Popover 需要第二次点击才能显示
【发布时间】：2018-04-30 15:53:04
【问题描述】：

这使您在获得图像和弹出框出现之前单击两次，但在您这样做之后，它会按预期工作，当您单击下一个时，前一个消失并出现新的。另外，我认为这可以巩固。任何帮助，将不胜感激。这是一个代码笔示例：Boostrap Popover Timeline

$(".timeline-list-btn").on('click', function() {
  $("[data-toggle='popover']").popover()
  $("[data-toggle='popover']").not(this).popover('hide')


  $("#1-btn").on('click', function() {
    $(this).css({
      'background': 'url(../img/help/help1.svg) no-repeat center center',
      'background-color': '#4359AB',
      'background-size': "65px, 65px",
      'transform': 'scale(0.75, 0.75)',
      'box-shadow': 'none',
    });
    $("[data-toggle='popover']").not(this).css({
      'background': 'white',
      'transform': 'scale(0.25, 0.25)',
    });
  });

  $("#2-btn").on('click', function() {
    $(this).css({
      'background': 'url(../img/help/help2.svg) no-repeat center center',
      'background-color': '#4359AB',
      'background-size': "65px, 65px",
      'transform': 'scale(0.75, 0.75)',
      'box-shadow': 'none'
    });
    $("[data-toggle='popover']").not(this).css({
      'background': 'white',
      'transform': 'scale(0.25, 0.25)'
    });
  });

  $("#3-btn").on('click', function() {
    $(this).css({
      'background': 'url(../img/help/help3.svg) no-repeat center center',
      'background-color': '#4359AB',
      'background-size': "65px, 65px",
      'transform': 'scale(0.75, 0.75)',
      'box-shadow': 'none'
    });
    $("[data-toggle='popover']").not(this).css({
      'background': 'white',
      'transform': 'scale(0.25, 0.25)'
    });
  });
});

【问题讨论】：

标签： javascript jquery twitter-bootstrap popover

【解决方案1】：

我重构了函数。我的问题的唯一答案是包装函数上的 .mousedown() ，就这么简单。看看下面：

$(".timeline-list-btn").mousedown(function() {
  $("[data-toggle='popover']").popover()
  $("[data-toggle='popover']").not(this).popover('hide')
// Wrap the above functions into a trigger function here


  $("#1-btn").click(function() {
    $(this).css({
      'background': 'url(../img/help/help1.svg) no-repeat center',
      'background-color': '#4359AB',
      'background-size': "65px, 65px",
      'transform': 'scale(0.75, 0.75)',
      'box-shadow': 'none',
    });
    $("[data-toggle='popover']").not(this).css({
      'background': 'white',
      'transform': 'scale(0.25, 0.25)',
    });
  });

  $("#2-btn").click(function() {
    $(this).css({
      'background': 'url(../img/help/help2.svg) no-repeat center',
      'background-color': '#4359AB',
      'background-size': "65px, 65px",
      'transform': 'scale(0.75, 0.75)',
      'box-shadow': 'none'
    });
    $("[data-toggle='popover']").not(this).css({
      'background': 'white',
      'transform': 'scale(0.25, 0.25)'
    });
  });

  $("#3-btn").click(function() {
    $(this).css({
      'background': 'url(../img/help/help3.svg) no-repeat center',
      'background-color': '#4359AB',
      'background-size': "65px, 65px",
      'transform': 'scale(0.75, 0.75)',
      'box-shadow': 'none'
    });
    $("[data-toggle='popover']").not(this).css({
      'background': 'white',
      'transform': 'scale(0.25, 0.25)'
    });
  });
});

【讨论】：