1

だから私は少し検索しましたが、私の問題に対する答えを見つけることができませんでした。

ページの左側に「フィードバック」メニューがあり、その「フィードバック」リンクをフィードバックdivと一緒にスライドさせたいです。

その代わりに、リンクは押しのけられます。

これが私が今していることのjsFiddleです。

$(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ですが、私は成功せずにたくさんのことを試みました。私は私を助けるためにあなたに変わります。

4

1 に答える 1

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/

于 2013-02-08T10:15:43.427 に答える