1

请看这个链接

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 正常工作。

当您单击第一个按钮时，它怎么会滑出？

我究竟做错了什么？

4

2 回答 2

2

使用类：

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

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

这就是你所需要的：

现场演示

var $slideout = $('#slideout');
$(".getitnow").click(function () {
    var inView = parseInt($slideout.css('right'), 10) < 0;
    $slideout.stop().animate({ right: (inView ? 0 : -300) }, 500);
});
于 2013-08-27T10:45:38.517 回答
0

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

于 2013-08-27T10:45:59.207 回答