从右向左滑动div，但只有一个div

Question

我正在添加另一个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。

Answer 1

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. 
     }); 
    } 
    }); 
}); 

Answer 2

。 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/

Answer 3

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. 
    }); 
    } 
}); 

http://jsfiddle.net/qGVfp/29/

Answer 4

使用类，而不是IDS，即使用class="siteMap"（.siteMap在CSS中）而不是id="siteMap"。还可以利用$(this).parent()访问父元素。请在这里更新的代码：http://jsfiddle.net/qGVfp/28/

Answer 5

在这段代码

<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