jQuery：单击图像以框的形式显示下面的div

我所拥有的： 我有三个图标浮动在一起。当我悬停其中一个图标时，图标下方会出现一个固定大小的框。盒子里面有链接

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

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

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() {
}); });

---

我假设您遇到的问题是，当您从图标移到菜单时，菜单会消失，因为“unhover”事件会在#fb图标上触发

您可能需要执行以下操作：

$(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图标内容。每个图标不应该有一个吗？

试试这个：

HTML:

JS:

---

您希望鼠标悬停时，还是单击时，长方体下降？我希望单击图标时，长方体下降。当我单击另一个图标时，第一个框应该向上滑动，新的框应该向下滑动。你是如何保存的；（JSFIDLE没有为我保存。@Czeraz您的回复给了我悬停效果，我要求提供一个悬停函数，该函数将为我带来一个可见的框，直到我再次单击同一个图标或另一个图标：）Omar:我不想用所有代码来打扰你们。脚本是最重要的，CSS在这里是次要的。

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

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

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;
}

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();
    }
});