2013-02-08 44 views
1

所以我做了一些搜索,但沒有找到我的問題的答案。JQuery橫向滑動不能正確推送我的div

我在頁面左側有一個「反饋」菜單,我希望「反饋」鏈接可以反饋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,但我嘗試了一堆東西,沒有任何成功。 我正在變成你來幫助我。

回答

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

DEMO

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

+0

謝謝Ayman,這解決了我的問題! –