php - 我怎样才能使 DIV 使用 jquery 做到这一点？

Question

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

下图显示了点击时它执行的不同操作。

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

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

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

Answer 1

悬停不需要 JavaScript。创建一个用作工具提示的元素并将其放置在下拉按钮上方。然后做 parent <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 .