Question

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

我想要的是什么： 点击图标和/或鼠标后，我希望盒子保持打开状态。每当我再次点击图标或点击另一个图标（然后打开一个新框，对于该图标）时，我希望该框关闭。

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

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

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

Answer 2

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

您可能想要这样做：

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

jQuery：点击图片将下面的div显示为一个框

2 个答案: