Question

这里很奇怪。

第一次切换打开/关闭时，幻灯片切换功能正常。第二次，div移出页面。

查看实时示例here。角落底部连接，打开和关闭几次。

    <!-- Basket overlay -->
<div id="basketHolder">
    <div class="basketButton">
        <a href="">Your Shopping Bag</a>
    </div>
    <div class="basket">
        <p>test</p>
    </div>
</div>   

$(document).ready(function(){
  $(".basketButton").click(function(e){
      e.preventDefault();
    $(".basket").slideToggle("slow");
  });
});

/* Basket */
#basketHolder {
    position:fixed;
    bottom:25px;
    right:25px;
    padding-top:67px;
}
.basketButton{
    position:absolute; top:0; right:0;
    /*background-image:url('images/pinkbag.png');*/
    background:red;
    padding-left:60px;
    display:inline-block;
    background-repeat: no-repeat;
    height: 67px;
}

.basketButton a{
    white-space:nowrap;
    font-weight:bold;
    font-size:18px;
    color: #67062F;
    padding-top:15px;
    display:inline-block;
}

.basket{
    display:none;
    width:250px;
    height:200px;
    padding:10px;
    border-radius:5px;
    /*background-image:url('images/pink-bg.png');*/
    background:blue;
}


.basket h3{
    color:#FFF;
}

Answer 1

更改basketButton类如下：

.basketButton{
    width:270px;
    position:relative; 
    text-align:right;
    /*background-image:url('images/pinkbag.png');*/
    background:red;
    display:inline-block;
    background-repeat: no-repeat;
    height: 67px;
}

jQuery幻灯片切换，div在第一次切换后移动位置

1 个答案: