Question

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

无论你点击哪个按钮，我都试图让幻灯片工作正常工作。

单击第一个按钮时，它是如何滑出来的？

我做错了什么？

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

Answer 2

使用class而不是id，页面中不能使用相同的id。

滑出jquery div只能在一个按钮上工作？

2 个答案: