0

我有一个包含客户社交资料链接的内容 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');
    });

});

请帮忙！

4

1 回答 1

1

给定您的 html，以下是用于移动侧边栏的简单 jquery 脚本

  1. 添加position:relative到css for .oneand.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/

于 2013-04-29T13:44:17.270 回答