jQuery : 아래 상자를 상자로 표시하려면 이미지를 클릭하십시오.

Question

내가 가지고있는 것 : 나는 서로 옆에 3 개의 아이콘이 있습니다. 아이콘 중 하나를 가리키면 고정 된 크기의 상자가 아이콘 아래에 나타납니다. 상자 안에는 링크가 있습니다.

내가 원하는 것 : 아이콘이나 마우스 아웃을 클릭 한 후 상자를 열어두기를 원합니다. 아이콘을 다시 클릭 할 때마다 또는 다른 아이콘을 클릭 할 때마다 상자가 닫히길 원합니다. 그러면 해당 아이콘에 대해 새 상자가 열립니다. 내가 현재 호버 효과를 사용하고있는 스크립트를 변경/조정에 도움이 필요 :

나는 도움이 필요합니다. 누군가?

jQuery를

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

UPDATE 시험의 몇 시간 후, 나는이 스크립트는 내가 필요로 무엇을 만들 것을 발견 :

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

Answer 1

나는 가정 발생한 문제는 때입니다 아이콘에서 메뉴로 이동하면 메뉴에 "언 후브"이벤트가 # fb-icon에서 실행되므로 메뉴가 사라집니다.

는이 작업을 수행 할 수 있습니다 : 당신이 하나의 #의 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'); 
    }); 
}); 

그러나, 그것은 보인다. 아이콘 당 하나씩 가져야하지 않습니까?

Answer 2

이 시도 : 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(); 
    } 
});