Question

所以我做了一些搜索，但没有找到我的问题的答案。

我的页面左侧有一个“反馈”菜单，我希望通过反馈div滑动“反馈”链接。

而不是那样，链接就被推开了。

Here is a jsFiddle of what I do right now

$(document).ready(function(){
$("#feedback-titre").click(function(){
    $("#feedback-commentaire").toggle("slide");
});
});

CSS：

    #menu-leftfeedback{
    position: fixed;
    left: 0px;
    top: 250px;
}

#feedback-titre{
    float:left;
    background-color:#FFF;
    color:#000;
    font-weight:bold;
    border-radius: 5px 5px 0px 0px;
    border:solid 1px #9C8E69;
    border-bottom:0px;
    cursor:pointer;
    display:block;
    width:100px;
    height:30px;
    font-size:large;
    -webkit-transform: rotate(90deg);
    -webkit-transform-origin: bottom left;
    -moz-transform: rotate(90deg);
    -moz-transform-origin: bottom left;
    -ms-transform: rotate(90deg);
    -ms-transform-origin: bottom left;
    -o-transform: rotate(90deg);
    -o-transform-origin: bottom left;
    transform: rotate(90deg);
    transform-origin: bottom left;
}

#feedback-commentaire{
    float:left;
    background-color:cyan;
    display:none;
    width:300px;
    height:330px;
}

#feedback-commentaire input, #feedback-commentaire textarea{
    width:290px;
    border: medium none;
    color: #7B7B7B;
    font-size: 18px;
    height: 38px;
    padding: 2px 10px 2px 7px;
}

#feedback-commentaire button{
    background-color:transparent;
    border:0;
    color:#D42E00;      
}

我的猜测：它是CSS，但我尝试了很多东西但没有成功。我转向你帮助我。

Answer 1

以下是我如何运作：

<强> CSS

#menu-leftfeedback{
    position: fixed;
    left: -300px;
    top: 250px;
}

#feedback-commentaire{
    float:left;
    background-color:cyan;
    /*XXXXXXX REMOVED XXXXXXX display:none;*/
    width:300px;
    height:330px;
}

<强> JS

var feedbackButton = $("#feedback-titre"),
    feedbackContent = feedbackButton.parent();

feedbackButton.click(function(){
    feedbackContent.animate({
        left: parseInt(feedbackContent.css('left'),10) == 0 ? -feedbackContent.outerWidth() + feedbackButton.outerWidth() : 0
    }, 500);
});

<强>样本

http://jsfiddle.net/66aa7/110/

JQuery水平幻灯片没有正确地推动我的div

1 个答案: