如何根据点击哪个触发链接来更改隐藏/显示div的位置？

Question

我有一个包含客户的社交个人资料链接的内容div。顶部导航和页脚导航都包含我想要触发此面板的链接。

如果单击顶部导航链接，我希望面板出现在该顶部链接下。

如果单击页脚导航链接，我希望面板出现在该页脚链接的上方。

我该如何做到这一点？

的例子可以在这里显示：

http://landmarkdenver.com/

看到了吗？如果单击连接图标（选择国家/地区下拉菜单旁边），面板顶部将出现 ，但如果单击底部的连接链接，面板将显示在底部。

这里是我使用的代码，但它不工作：

HTML：

<div class="one"><a href="#sidebar-connect">Show It</a></div> 
<div class="two"><a href="#sidebar-connect">Display It</a></div> 

<div id="sidebar-connect" class="widget-area cf"> 
    <div id="text-7" class="widget-1 widget-first widget-odd facebook widget widget_text"> 
    <h3 class="widget-title">Landmark Forum Grads on Facebook</h3>   
     <div class="textwidget"> 
     <p>Connect with Landmark friends near you and around the world. <a href="http://www.facebook.com/pages/Landmark-Education/79075676234?v=box_3&amp;ref=ts#!/pages/Landmark-Education/79075676234?v=wall&ref=ts" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://www.facebook.com']);" target=_blank />Follow Landmark &gt;</a></p> 
     <p>Get insights from Landmark Forum leaders—powerful, practical, profound. <a href="http://www.facebook.com/LandmarkInsights" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://www.facebook.com']);" style="margin-top:0;" target=_blank />Follow Landmark Insights &gt;</a></p> 
     </div> 
    </div> 
    <div id="text-6" class="widget-2 widget-even insights widget widget_text"> 
    <h3 class="widget-title">Landmark Newsletter for Landmark Forum Grads</h3> 
     <div class="textwidget"> 
     <p>Get powerful insights from Landmark Forum leaders direct to your inbox or on your phone. <a href="http://www.landmarkinsights.com" onclick="javascript:_gaq.push(['_trackEvent','outbound-widget','http://www.landmarkinsights.com']);" target=_blank />Landmark Insights, a Landmark Newsletter &gt;</a></p> 
     </div> 
    </div> 
    <span class="pointer"></span> 
</div> 

CSS：

.two { 
    float:left ; 
    width:40% ; 
} 

.one { 
    float:right ; 
    width:40% ; 
} 


#sidebar-connect { 
    display:none; 
    position:absolute; 
    top:33px; 
    bottom:auto; 
    left:-257px; 
    width:270px; 
    padding:10px; 
    color:#41352f; 
    background:#fff; 
    font-size:10px; 
    border:1px solid #bfb6a8; 
    z-index:99; 
    box-shadow: 0 3px 3px 0px rgba(0, 0, 0, 0.3) 
} 

#sidebar-connect .pointer { 
    position:absolute; 
    top:-6px; 
    right:15px; 
    display:block; 
    width:10px; 
    height:10px; 
    background:#fff; 
    border-top:1px solid #bfb6a8; 
    border-right:1px solid #bfb6a8; 
    -webkit-transform:rotate(-45deg); 
    transform:rotate(-45deg); 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067690849304, M12=0.7071067690849304, M21=-0.7071067690849304, M22=0.7071067690849304,sizingMethod='auto expand'); 
} 

#sidebar-connect.bottom { 
    top:auto; 
    left:0; 
    bottom:30px; 
    box-shadow: 0 -3px 3px 0px rgba(0, 0, 0, 0.3) 
} 

#sidebar-connect.bottom .pointer { 
    left:15px; 
    right:auto; 
    top:auto; 
    bottom:-6px; 
    -webkit-transform:rotate(135deg); 
    transform:rotate(135deg); 
    filter: progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067690849304, M12=-0.7071067690849304, M21=0.7071067690849304, M22=-0.7071067690849304,sizingMethod='auto expand'); 
} 

#sidebar-connect .widget { 
    margin:5px 0; 
    padding:5px 0; 
    border-bottom:1px solid #bfb6a8; 
    line-height:12px; 
} 

#sidebar-connect .widget:last-of-type { 
    border-bottom:none; margin-bottom:0; 
} 

#sidebar-connect .widget-title {background-image:url('img/sprites.png'); overflow:hidden; text-indent:-999px; margin-bottom:5px;} 
#sidebar-connect .widget p  {margin-bottom:5px; margin-top:0; text-transform: none;} 
#sidebar-connect .widget a  {white-space:nowrap; font-size:10px; text-decoration:none;} 
.blogs .textwidget    {background:url('img/sprites.png') 0 2px no-repeat; padding-left:55px; min-height:45px;} 
.blogs .widget-title   {background-position: 0 -93px; width: 106px; height: 13px;} 
.facebook .widget-title   {background-position: 0 -298px; width: 70px; height: 20px;} 
.facebook .textwidget p   {background:url('img/sprites.png') 0 -226px no-repeat; padding-left:25px; min-height:20px;} 
.googleplus .widget-title  {background-position: 0 -368px; width: 60px; height: 20px;} 
.insights .widget-title   {background-position: 0 -532px; width: 112px; height: 15px;} 
.insights .textwidget   {background:url('img/sprites.png') 0 -438px no-repeat; padding-left:55px; min-height:45px;} 
#text-5 .widget-title   {background-position:0 -597px; width: 71px; height: 21px;} 
.youtube .widget-title   {background-position: 0 -733px; width: 47px; height: 17px;} 
.youtube .textwidget p   {background:url('img/sprites.png') 0 -666px no-repeat; padding-left:25px; min-height:19px;} 

和JQuery的：

jQuery(document).ready(function($) { 

    // Setup the Connect Box functionality 
    jQuery("[href='#sidebar-connect']").showHideConnectBox(); 

    jQuery("#sidebar-connect").mouseleave(function() { 
     jQuery("#sidebar-connect").stop(true,true).slideUp('fast').removeClass('show'); 
    }); 

}); 

请帮忙！

Answer 1

给你的HTML，下面是一个简单的jQuery脚本来移动你的侧边栏

1. 添加position:relative以CSS为.one和.two
2. 添加一个普通类的链接 - 在这种情况下，我选择了link
3. 添加下面的jQuery您$(document).ready

jQuery的

var sidebar = $('#sidebar-connect'); 

$('.link').click(function(e) { 
    e.preventDefault(); 
    sidebar.stop().hide().detach(); 
    $(this).append(sidebar); 
    sidebar.slideDown(); 
}); 

例http://jsfiddle.net/zg77u/2/