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

Posted 2023-05-08

【中文标题】Bootstrap Popover 需要第二次点击才能显示

【英文标题】：Bootstrap Popover Requires Second Click Before Showing

【发布时间】：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)'
    );
  );
);

【参考方案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)'
    );
  );
);