https://jsfiddle.net/8y5023hz/

考虑一下上面的jsfiddle（下面还发布了相应的html、css和js代码片段）。

当您悬停在“悬停我”部分时，您将获得一个包含li元素的工具提示。它看起来如下所示:

现在，当您单击“查看更多”时，应该会打开更多的li元素，并显示“查看更少”选项，如下所示:

实际问题

现在，如果我单击“减少查看”，所发生的事情是工具提示的大小减小，因此它超出了我的光标位置，因此工具提示消失了，基本上使这个“减少查看”功能变得无用。如何确保此“减少查看”功能与工具提示悬停功能一起工作？

我创建这个MVP示例是因为我们有来自UX的类似需求。你觉得怎么能解决这个问题？在顶部有“查看更多”按钮可能很棒，但UX不想要它。

顺晟科技：

下面是我做的一个小解决方案:https://jsfiddle.net/ald7oksn/

新JavaScript文件:

$(".title").hover(
  (e) => {
    console.log("in");
    $(".tooltip").show();
  },
  (e) => {
    console.log("out");
    $(".tooltip").hide();
  }
);

$(".tooltip").hover(
  (e) => {
    $(".tooltip").show();
  },
  (e) => {
    $(".tooltip").hide();
  }
);
let isShow = false;
$("#view_toggle").on("click", (e) => {
  if (isShow) {
    $(".li_hide").hide();
    $("ul li:last").text("View More");
  } else {
    $(".li_hide").show();
    $("ul li:last").text("View Less");
  }
  isShow = !isShow;
});

这并不完美，但它使菜单在消失前持续一秒钟

我认为如果您更改“查看更多”按钮的位置会更好，因为从那里将很难正确地取消事件，请检查下面代码的修改: