從右向左滑動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