从右向左滑动div,但只有一个div
我正在添加另一个div,它不起作用。如果我再添它应该工作:从右向左滑动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。
这里是the fiddle。
id值必须是唯一的每个文档,所以你不能有多个< div id =“siteMap”>或其他任何东西。
请考虑使用类。也就是说,< div class =“siteMap”...等等。相应地更新你的CSS和jQuery选择器( '.siteMap')
编辑:当您使用$('#mapButton')
发现此类ID的第一个元素尝试这种(未经测试)
<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.
});
}
});
});
。 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.
});
}
});
});
感谢您斯佩兰斯基DANIL – 2013-02-13 05:54:34
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.
});
}
});
太感谢你了dfsq – 2013-02-13 05:50:43
您好,请问有什么当我点击按钮外部时,它会关闭所有内容。 – 2013-02-14 01:56:13
使用类,而不是IDS,即使用class="siteMap"
(.siteMap
在CSS中)而不是id="siteMap"
。还可以利用$(this).parent()
访问父元素。请在这里更新的代码:http://jsfiddle.net/qGVfp/28/
也感谢你Harshith J.V. – 2013-02-13 05:52:08
在这段代码
<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多次在HTML中<div id="mapButton">
和<div id="siteMap">
相同的ID。
尝试使用css class
写javascript
谢谢我现在明白了Pradeep – 2013-02-13 05:55:08
评论时,投了票。提供反馈是件好事 – NPKR 2013-02-13 06:10:57
首先,定义相同的ID 2次所有,但ID必须是唯一的。你不能两次定义相同的id。 – 2013-02-13 05:50:59
你可以试试这个教程更好的结果 http://www.themeswild.com/read/slide-navigation-left-to-right – 2016-09-30 07:13:10