Question

我有一个非常具体的要求。我一直在浏览其他一些帖子，但无法找到明确的答案，所以请帮助。

我正在寻找一个jQuery工具提示，当悬停是一个正常的工具提示，文本居中。但是，当您单击该元素时，工具提示会向左扩展（文本将保持居中，因此当工具提示中心向左移动时，它将显示为向左移动）并且下拉菜单会在工具提示下方滑出。我仍然在考虑扩大是否有必要，但我希望能够点击下拉菜单。

对此的任何和所有帮助将不胜感激。谢谢！

编辑*** 我写了一些我无法真正开始工作的代码。现在我只是想用div来解决它，希望我可以用工具提示形状替换“toolTip”div，而不仅仅是一个盒子，但我想在我担心之前让事情起作用。任何有关以下代码的帮助表示赞赏。谢谢！

我提前为缺少一些缩进和内容而道歉，我不知道为什么我的代码不会复制/粘贴到这里。

HTML：

<div id="wrapper">

<div class="topIconNew">
</div>

<div class="topTip">
</div>

<div class="topDrop">
</div>

</div>

CSS：

div#wrapper {
margin:0 auto;
width:100%;
height:100%;
position:relative;
    top:0;
    left:0;
}  

.topIconNew {
background-color:red;
border:solid 1px #444444;
width:20px;
height:20px;
position:fixed;
    top:50px;
    left:450px;
cursor:pointer    
}

.topTip {
background-color:#d3d3d3;
border:solid 1px #444444;
width:80px;
height:20px;
position:fixed;
    top:70px;
    left:450px;    
}    

.topDrop {
background-color:#ffffff;
border:solid 1px #555555;
width:100px;
height:300px;
position:fixed;
    top:90px;
    left:450px;        
}

的jQuery

$(document).ready(function() {

// tooltip hover
$("div.topIconNew").hover(
    function(){
        $("div.topTip").show();
    }
);        

//tooltip widening and dropdown menu

$("div.topIconNew").click(
    function(){
        //permanent tooltip
        $("div.topTip").show();
    },    
    function(){
        //widen tooltip
$("div.topTip").animate({width:200},"fast");
    },        
    function() {
        //show dropdown
        $("div.topDrop").slideDown(300);
    }
);
$("div.wrapper").click(
    function(){
        //hide dropdown (hide simultaneously)
        $("div.topDrop").hide();
    }
    function(){
        //hide tooltip (hide simultaneously)
        $("div.topTip").hide();
    {        
);

});

非常感谢任何和所有帮助。谢谢！

Answer 1

从头开始假设我首先构建

可以绝对定位的下拉菜单类
可以绝对定位的工具提示类

这些类必须是自包含的，例如下拉列表应该处理所有绑定事件等...首先我将悬停元素挂钩到工具提示的任何触发器上，然后定位工具提示并设置文本。然后，我将onClick事件附加到同一项目内部，并且我在其中：

将工具提示标记为＆＃34;将鼠标悬停不再销毁它＆＃34; （可能使用外部点击文档）
在工具提示对象上运行一个动画，它将x位置设置为x-200（例如），并将宽度设置为+ 200（.animate({x: '-=200', width: '+=200'})）
我在动画上附加了一个事件监听器，所以在动画结束时，我将相对于工具提示附加下拉列表

如果您单独编码，应该很容易将它们连接在一起。你真的只需要关注这样一个系统中的主要问题：

将鼠标悬停在工具提示的项目
鼠标悬停在工具提示的项目
点击项目以飞出工具提示并标记为持久性
附加下拉列表
回应下拉事件

动态jQuery工具提示

1 个答案: