Question

这使你点击两次，然后才能显示图像和弹出窗口，但是在你这样做之后它会按预期工作，当你点击下一个时，前一个消失并出现新的一个。此外，我认为这可以巩固。任何帮助，将不胜感激。这是一个代码示例：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)'
    });
  });
});

Answer 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)'
    });
  });
});

Bootstrap Popover在显示之前需要第二次点击

1 个答案: