javascript - 滑出 jquery div 仅适用于一个按钮？

Question

请参阅this link

html

 <div id="getitnow">btn 1</div>
 <div id="getitnow">btn 2</div>
 <div id="getitnow">btn 3</div>
 <div id="getitnow">btn 4</div>

 <div id="slideout">
   <div id="containclickme">
   </div>
 </div>

CSS

#slideout {
background: #666;
position: relative;
width: 300px;
height: 80px;
right:-300px;
margin-top:50px;
float:right;
}

#getitnow {
padding:10px;
border:1px solid #ccc;
width:100px;
}

脚本

$(function () {
// cache the sliding object in a var
var slideout = $('#slideout');
// click-me not clickme
$("#getitnow").toggle(function () {
    // use cached object instead of searching
    slideout.animate({
        right: '0px'
    }, {
        queue: false,
        duration: 500
    });
}, function () {
    // use cached object instead of searching        
    slideout.animate({
        right: '-300px'
    }, {
        queue: false,
        duration: 500
    });
});
});

无论您单击哪个按钮，我都试图让滑出的 div 正常工作。

怎么只有点击第一个按钮才滑出？

我做错了什么？

Answer 1

使用类:

<div class="getitnow"></div>

因为我们不允许在 DOM 中有多个 ID。

这就是您所需要的:

LIVE DEMO

var $slideout = $('#slideout');
$(".getitnow").click(function () {
    var inView = parseInt($slideout.css('right'), 10) < 0;
    $slideout.stop().animate({ right: (inView ? 0 : -300) }, 500);
});