jQuery：单击图像以将下面的 div 显示为一个框答案

【问题标题】：jQuery: Click image to show div below as a boxjQuery：单击图像以将下面的 div 显示为一个框
【发布时间】：2012-02-11 17:46:49
【问题描述】：

我有什么： 我有三个图标漂浮在彼此旁边。当我悬停其中一个图标时，图标下方会出现一个固定大小的框。盒子里面有链接。

我想要什么： 单击图标和/或鼠标移出后，我希望该框保持打开状态。每当我再次单击该图标或单击另一个图标时，我希望该框关闭（这反过来又为该图标打开一个新框）。

我需要帮助： 我需要帮助调整/更改我当前用于悬停效果的脚本。有人吗？

jQuery

$(document).ready(function() {
    $("#fb-icon").hover( function() {
        $("#fb-icon-content").css('display','block');
    }, function() {
        $("#fb-icon-content").hide();
    });
});

更新经过几个小时的测试，我发现这个脚本创建了我需要的内容：

$('#expand-facebook').click(function() {
$('#facebook-expanded').toggle('slow', function() {
}); });

【问题讨论】：

您希望该框在您悬停或单击时下降？
我希望当我点击一个图标时该框会掉落。当我单击另一个图标时，第一个框应该向上滑动，新的框应该向下滑动。

标签： jquery click hover

【解决方案1】：

试试这个： http://jsfiddle.net/8T8sA/

HTML：

<ul>
    <li class="ico"></li>
    <li class="ico"></li>
    <li class="ico"></li>
</ul>

<div id="fb-icon-content">some content</div>

CSS：

ul {
    list-style:none;
}
.ico {
    margin-left:50px;
    width:32px; height:32px;
    float:left;
    border:1px solid red;
}

#fb-icon-content {
    position:fixed;
    border:1px solid red;
    display:none;
}

JS：

var shown = false;

$(".ico").hover( function() {
    if ( shown === false ) {
        var that = $(this),
            offset = that.offset(),
            tooltipElement = $("#fb-icon-content");

        tooltipElement.css({
            top: offset.top + that.height() + 10,
            left: offset.left + that.width()/2 - tooltipElement.width()/2
        }).show();
    }
}, function() {
    if ( shown === false ) {   
        $("#fb-icon-content").hide();
    }
}).bind('click', function() {
    var tooltipElement = $("#fb-icon-content"),
        that = $(this);

    if ( shown === that.index() ) {
        tooltipElement.hide();
        shown = false;
    } else {
        shown = $(this).index();

        var that = $(this),
            offset = that.offset(),
            tooltipElement = $("#fb-icon-content");

        tooltipElement.css({
            top: offset.top + that.height() + 10,
            left: offset.left + that.width()/2 - tooltipElement.width()/2
        }).show();
    }
});

【讨论】：

你是怎么保存的！ ;( JSFiddle 没有为我省钱。
@czerasz 你的回复给了我悬停效果，我要求一个悬停功能，它会给我带来一个可见的框，直到我再次单击同一个图标或另一个图标:)

【解决方案2】：

我认为您遇到的问题是，当您将图标移出菜单时，菜单会消失，因为 #fb-icon 上触发了“unhover”事件？

您可能想要这样做：

$(document).ready(function() { 
    // to show when clicked
    $("#fb-icon").click( function() { 
        // hide the previously opened content
        if (window.lastContent != null )
            window.lastContent.css('display','none'); 

        window.lastContent = $("#fb-icon-content");
        window.lastContent.css('display','block'); 
    });
    // show the icon content when hover on the icon
    $("#fb-icon").hover( function() { 
        window.lastContent = $("#fb-icon-content");
        window.lastContent.css('display','block'); 
    }); 
});

但是，您似乎只有一个#fb-icon-content。每个图标不应该有一个吗？

【讨论】：

Omar：我不想用所有的代码来打扰你们。脚本最重要，CSS 在这里是次要的。