我有一個包含客戶的社交個人資料鏈接的內容div。頂部導航和頁腳導航都包含我想要觸發此面板的鏈接。如何根據點擊哪個觸發鏈接來更改隱藏/顯示div的位置?
如果單擊頂部導航鏈接,我希望面板出現在該頂部鏈接下。
如果單擊頁腳導航鏈接,我希望面板出現在該頁腳鏈接的上方。
我該如何做到這一點?
的例子可以在這裏顯示:
看到了嗎?如果單擊連接圖標(選擇國家/地區下拉菜單旁邊),面板頂部將出現 ,但如果單擊底部的連接鏈接,面板將顯示在底部。
這裏是我使用的代碼,但它不工作:
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');
});
});
請幫忙!
你可以發佈您的相關HTML和jQuery代碼? – tymeJV 2013-04-29 12:58:23
如果我沒有錯,那麼你可以簡單地使用jQuery'手風琴'。因爲你的第二和第三行指向這個想法 – 2013-04-29 12:58:26