Question

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

下面的图片显示了点击时的不同操作。

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

任何人都可以澄清我正朝着正确的方向前进。我没有非常使用jquery或javascript。任何像这样的事情或帮助的例子将不胜感激。

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

Answer 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。

Answer 2

以下是我采取的方法：

对于悬停，请查看jQuery的hover event以更改不同的图像状态
对于工具提示，有几个jQuery插件，例如qTip，您可以实现这样的目标
点击后，jQuery的click event将起作用
下拉列表会有点棘手。您需要使用ajax methods和selector methods的组合来更改页面（即子弹）
最后，当页面最初加载时，您必须执行某种类型的请求以找出选择的设置，然后显示选择。这可以通过php加载页面，或者如上所述的ajax请求来完成。

如何让DIV用jquery做到这一点？

2 个答案: