Question

我正面临一个问题，即在我的解决方案中的某些工具提示框中正确使用jQuery draggable（）。

$('body').on("click", ".js-tooltip", function () {
  var $This = $(this);
  var posOfTooltip = $This.offset();
  var keyword = "#" + $This.data('keyword');
  var $Tooltip = $(document).find(keyword);
  if (firstChild !== "Afstand") {
    $Tooltip.css({ top: posOfTooltip.top, left: posOfTooltip.left   });
  }           
  $Tooltip.show();
  $(".tooltip_box").draggable();
});

以上是我打开工具提示的方法。页面是＆＃34; Afstand＆＃34;我不需要在工具提示上设置位置。

以下是关闭它们的方法：

$('.tooltip_box').on("click", ".js-setclose", function () {
  var $This = $(this);
  $(document).find("#" + $This.parent().attr('id')).hide();
});

上述内容适用于除一个（Afstand页面）之外的所有页面，我必须在要隐藏之前拖动元素。当我在js-setclose点击时调试一些内容时，它正确地记录了点击，但它不会隐藏，除非我在点击时拖动元素。它只能在＃34; Afstand＆＃34;页。我可以在不拖动所有其他页面的情况下关闭。

Answer 1

我最终找到了另一种解决方案。我在加载时将所有工具提示移动到html文档的顶部。

$(".tooltip_box").insertBefore("#main-content");

然后使用以下jquery工作：

//Open the tooltip
$('body').on("click", ".js-tooltip", function () {
    var $This = $(this);
    var posOfTooltip = $This.offset();
    var keyword = "#" + $This.data('keyword');
    var $Tooltip = $(document).find(keyword);
    $Tooltip.css({ top: posOfTooltip.top, left: posOfTooltip.left });
    $Tooltip.eq(0).show();
    $(".tooltip_box").draggable();
});

//Setclose

$('.tooltip_box').on("click", ".js-setclose", function () {
    var $This = $(this);
    $This.parent().hide();
});

我怀疑将每个工具提示移到文档顶部使其正常工作。

jQuery hide（）无法处理draggable（）元素

1 个答案: