如何根据单击的触发器链接更改隐藏/显示div的位置？
如何根据单击的触发器链接更改隐藏/显示div的位置？
提问于 2013-04-29 20:55:48
我有一个包含客户社交档案链接的content div。顶部导航和页脚导航都包含我希望触发此面板的链接。
如果顶部导航链接被单击，我希望面板出现在该顶部链接下。
如果单击了页脚导航链接，我希望面板出现在该页脚链接的正上方。
我如何才能做到这一点呢？
示例如下所示：
http://landmarkdenver.com/
看见?如果您单击连接图标(在Select Country下拉列表旁边)，面板将显示在顶部，但如果您单击底部的连接链接，面板将显示在底部。
以下是我正在使用的代码，但它不起作用：
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&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 ></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 ></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 ></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');
});
}); 请帮帮我！
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-04-29 21:44:17
给定您的html，下面是一个简单的jquery脚本，用于移动侧边栏
- 将
position:relative添加到css for.one，并将一个公共类添加到您的链接-在本例中，我选择了将以下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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/16279181
复制相关文章
相似问题
腾讯云开发者
