我怎样才能让 DIV 用 jquery 做到这一点？答案

【问题标题】：How can I make DIVs do this with jquery?我怎样才能让 DIV 用 jquery 做到这一点？
【发布时间】：2010-12-31 04:53:25
【问题描述】：

我正在尝试使用 jquery 和 php/mysql 在 facebook 上的帖子上重现锁定功能。

下面是一张图片，显示了它在点击时执行的不同操作。

我认为您会在悬停时做一些事情，显示带有工具提示的隐藏 div，在悬停时将其删除。点击事件显示另一个隐藏的 div，但不知何故也必须更改按钮的颜色。当菜单 div 被单击打开时，它有一个菜单，如果单击其中任何一个，它需要使用 ajax 将结果发送到后端脚本。单击选项或单击 div 外部后，它将隐藏所有 div，也许它只是在任何地方单击即可关闭它，所以也许可以使用切换？

谁能澄清我正朝着正确的方向前进。我没有使用过很多 jquery 或 javascript。任何类似这样的例子或帮助将不胜感激。

fb http://img2.pict.com/ed/9a/3a/2341412/0/screenshot2b166.png

【问题讨论】：

看看选择器和 hide() 函数
@gumbo，它在第一行说它来自 facebook

标签： php javascript jquery mysql css

【解决方案1】：

悬停不需要 JavaScript。制作一个元素作为工具提示并将其放置在下拉按钮上方。然后为两者创建一个父 <div>。您的 HTML 应如下所示：

<div id="container">
    <div id="button">...</div>
    <div id="tooltip">...</div>
</div>

完成后，您可以使用 CSS 定位工具提示并在必要时显示它。

#container {
    /* All child elements should be positioned relative to this one. */
    position: relative;
}

#container #tooltip {
    /* Hide by default. */
    display: none;
    /* Place the tooltip 2px above the button. */
    position: absolute;
    bottom: 2px;
    right: 0px;
}

#container #button:hover + #tooltip {
    /* Show it when someone's hovering over the button. */
    display: block;
}

要显示下拉框，您可能需要 JavaScript。向容器中添加另一个元素：

<div id="container">
    <div id="button">...</div>
    <div id="tooltip">...</div>
    <ul id="selection">
        <li>Something</li>
        <li>Something Else</li>
        <li>A Third Thing</li>
    </ul>
</div>

使用position: absolute 随意放置它并使用display: none 隐藏它。然后在我们点击按钮时显示：

$('#button').click(function() {
    $('#selection').show();
});

然后你可以让你的子项目做任何他们喜欢的事情，只要它们也隐藏#selection。

$('#selection li').click(function() {
    // do something
    $('#selection').hide();
});

最后，您想在悬停时更改背景和文本颜色。这很容易：

#selection li {
    background-color: #ccc;
    color: black;
}

#selection li:hover {
    background-color: black;
    color: white;
}

这在 IE 6 或（我相信）7 中无法完美运行 - 您需要为此研究替代解决方案。使用 JavaScript 或查看IE7.js and IE8.js。

【讨论】：

【解决方案2】：

这是我将采取的方法：

对于悬停查看 jQuery 的 hover event 以更改不同的图像状态
对于工具提示，有几个 jQuery 插件，例如 qTip，您可以实现类似的功能
对于点击，jQuery 的 click event 可以解决问题
下拉菜单会有点棘手。您需要结合使用ajax methods 和selector methods 来更改页面（即项目符号）
最后，您必须在页面最初加载时执行某种请求，以确定选择了哪个设置，然后显示选择。这可以在页面加载时使用 php 来完成，也可以如上所述使用 ajax 请求来完成。

【讨论】：