[英]Slide div from right to left but only one div
我要添加另一個div,它不起作用。 如果我添加另一個它應該工作:
的HTML
<div id="siteMap">
<div id="mapButton">button</div>
<div id="theMap">content here</div>
</div>
<div id="siteMap" style="margin-top:90px;">
<div id="mapButton">button</div>
<div id="theMap">content here</div>
</div>
的CSS
#siteMap {
width:200px;
position:fixed;
right:-200px;
top:0px;
display:block;
color:#FFF;
z-index:2;
opacity: 0.95;
}
#siteMap #mapButton {
display:block;
color:#333;
background-color:#ACACAC;
padding:2px 5px;
height:20px;
width:70px;
text-align:center;
position:relative;
right: 24px;
margin-top:80px;
cursor:pointer;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
#siteMap #theMap {
width:100%;
height:100px;
background-color:#666;
margin-top:-104px;
}
jQuery的:
$(document).ready(function() {
$('#mapButton').click(function() {
var mapPos = parseInt($('#siteMap').css('right'), 10);
if (mapPos < 0) {
$('#siteMap').animate({
right: '+=200'
}, 458, 'swing', function() {
// Animation complete.
});
} else {
$('#siteMap').animate({
right: '-=200'
}, 458, 'swing', function() {
// Animation complete.
});
}
});
});
如何解決呢? 即使添加另一個div,我也需要它來使這些div動畫。
這是小提琴 。
當您使用$('#mapButton')
它將找到具有此類ID的第一個元素。 id應該是uniq。 使用類而不是ID。
$(document).ready(function () {
$('.mapButton').click(function () {
var siteMap = $(this).parent();
var mapPos = parseInt(siteMap.css('right'), 10);
if (mapPos < 0) {
siteMap.animate({
right: '+=200'
}, 458, 'swing', function () {
// Animation complete.
});
} else {
siteMap.animate({
right: '-=200'
}, 458, 'swing', function () {
// Animation complete.
});
}
});
});
工作演示: http : //jsfiddle.net/xttaw/
ID必須是唯一的,而應該使用類:
$('.mapButton').click(function() {
var mapPos = parseInt($(this).parent().css('right'), 10);
if (mapPos < 0) {
$(this).parent().animate({
right: '+=200'
}, 458, 'swing', function() {
// Animation complete.
});
}
else {
$(this).parent().animate({
right: '-=200'
}, 458, 'swing', function() {
// Animation complete.
});
}
});
使用類代替id,即使用class="siteMap"
(CSS中的.siteMap
)代替id="siteMap"
。 並且還利用$(this).parent()
訪問父元素。 在此處檢查更新的代碼: http : //jsfiddle.net/qGVfp/28/
在這段代碼中
<div id="siteMap">
<div id="mapButton">button</div>
<div id="theMap">content here</div>
</div>
<div id="siteMap" style="margin-top:90px;">
<div id="mapButton">button</div>
<div id="theMap">content here</div>
</div>
您有兩次相同的ID,例如<div id="mapButton">
和<div id="siteMap">
建議不要在HTM1中多次使用相同的ID。
嘗試使用css class
編寫javascript
每個文檔的id值必須唯一,因此您不能有多個<div id =“ siteMap”>或其他任何內容。
考慮改用類。 也就是說,<div class =“ siteMap” ...等。 相應地更新您的css和jquery選擇器('.siteMap')
編輯:嘗試(未測試)
<div class="siteMap">
<div class="mapButton">button</div>
<div class="theMap">content here</div>
</div>
<div class="siteMap" style="margin-top:90px;">
<div class="mapButton">button</div>
<div class="theMap">content here</div>
</div>
.siteMap {
width:200px;
position:fixed;
right:-200px;
top:0px;
display:block;
color:#FFF;
z-index:2;
opacity: 0.95;
}
.siteMap .mapButton {
display:block;
color:#333;
background-color:#ACACAC;
padding:2px 5px;
height:20px;
width:70px;
text-align:center;
position:relative;
right: 24px;
margin-top:80px;
cursor:pointer;
transform-origin: 0% 0%;
-ms-transform-origin: 0% 0%;
-webkit-transform-origin: 0% 0%;
-moz-transform-origin: 0% 0%;
-o-transform-origin: 0% 0%;
transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
}
.siteMap .theMap {
width:100%;
height:100px;
background-color:#666;
margin-top:-104px;
}
$(document).ready(function() {
$('.mapButton').click(function() {
var mapPos = parseInt($(this).parent().css('right'), 10);
if (mapPos < 0) {
$(this).parent().animate({
right: '+=200'
}, 458, 'swing', function() {
// Animation complete.
});
} else {
$(this).parent().animate({
right: '-=200'
}, 458, 'swing', function() {
// Animation complete.
});
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.