實際的問題是
。現在，如果我點擊 "View Less"，發生的情況是，toolTip的大小減少了，因此它超出了我的游標位置，因此tooltip消失了基本上使這個 "View Less "功能變得無用。我如何確保這個 "減少查看 "功能與工具提示的懸停功能一起作業？
我創建了這個MVP示例，因為我們有來自用戶體驗的類似需求。您認為如何才能解決這個問題？在頂部設定 "查看更多 "按鈕本來是很好的，但是用戶體驗不希望這樣。
uj5u.com熱心網友回復： uj5u.com熱心網友回復： 這里是我做的一個小解決方案。https://jsfiddle.net/aLd7oksn/ 新的JavaScript檔案： 這并不完美，但它使選單在消失前持續了一秒
標籤：$(".title").hover(
(e) => {
console.log("in"/span>)。
$(".tooltip"/span>).show()。
},
(e) => {
console.log（"out"）。
$(".tooltip"/span>).hide()。
}
);
$(".tooltip").hover(
(e) => {
$(".tooltip").show() 。
},
(e) => {
$(".tooltip"/span>).hide()。
}
);
let isShow = false;
$("#view_toggle").on("click", (e) => /span> {
if (isShow) {
$(".li_hide"/span>).hide()。
$(this).text("View More") 。
} else {
$(".li_hide").show() 。
$(this).text("View Less") 。
}
isShow = !isShow;
});.title {
cursor: 指標。
字體大小。20px;
padding: 20px;
background-color: 紅色。
display: inline;
text-align: center;
vertical-align: middle;
}
.li_hide {
display: none;
}
.tooltip {
display: none;
cursor: 指標。
background-color: blue;
width: 200px;
// height: 100px;
position: absolute;
left: 50px;
top: 30px;
}
#view_toggle {
字體大小: .8em;
background-color: 黃色。
}<script src="https://cdnjs. cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>/span>
<p class="title"/span>> Hover Me</p>/span>
<div class="tooltip"/span>>
<h3>tooltip   < span id="view_toggle"/span>> (查看更多)</span></h3>
<ul>
<li>一個</li>
<li>兩個</li>
<li class="li_hide"/span>> 三</li>
<li class="li_hide"/span>> 四</li>
</ul>/span>
</div>/span>var showLessClicked = false;
$(".title"/span>).hover(
(e) => {
console.log("in"/span>)。
$(".tooltip"/span>).show()。
},
(e) => {
if(! showLessClicked){
console.log("out") 。
$(".tooltip"/span>).hide()。
}else{
showLessClicked = false;
setTimeout(function() {
if(!$(".tooltip").is(" : hover")){
console.log（"out"）。
$(".tooltip"/span>).hide()。
}
}, 1000）。)
}
}
);
$(".tooltip"/span>).hover(
(e) => {
$(".tooltip").show() 。
},
(e) => {
if(! showLessClicked){
$(".tooltip"/span>).hide()。
}else{
showLessClicked = false;
setTimeout(function() {
if(!$(".tooltip").is(" : hover")){
console.log（"out"）。
$(".tooltip"/span>).hide()。
}
}, 1000）。)
}
}
);
let isShow = false;
$("#view_toggle").on("click", (e) => /span> {
if (isShow) {
$(".li_hide"/span>).hide()。
$("ul li:last").text("View More") 。
$(".tooltip"/span>).show()。
} else {
$(".li_hide").show() 。
$("ul li:last").text("View Less") 。
showLessClicked = true;
}
isShow = !isShow;
});