設置滑動div按鈕和大小問題

Question

請你看看this demo並讓我知道如何將.clickme框與.slidecontent分開？我需要改變.slidecontent for example to高度的高度：300像素;`但是這也改變了灰色的陰影300像素

我需要什麼已經是具有.slidecontent與300高度，看起來像第三（綠色箭頭）

$(function() { 
 
    $("#clickme").toggle(function() { 
 
     $(this).parent().animate({left:'0px'}, {queue: false, duration: 500}); 
 
    }, function() { 
 
     $(this).parent().animate({left:'-280px'}, {queue: false, duration: 500}); 
 
    }); 
 
});

#slideout { 
 
    background: #666; 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 300px; 
 
    top: 45%; 
 
    left:-280px; 
 
} 
 
    
 
#clickme { 
 
    float: right; 
 
    height: 20px; 
 
    width: 20px; 
 
    background: #ff0000; 
 
} 
 

 
#slidecontent { 
 
    float:left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div id="slideout"> 
 
    <div id="slidecontent"> 
 
     Yar, there be dragonns herre! 
 
    </div> 
 
    <div id="clickme"> 
 
     > 
 
    </div> 
 
</div>

Answer 1

我不是100％肯定我明白你正在嘗試做的，但你的jQuery代碼指的是clickme的父母，其爲slideout，而不是slidecontent，並且很可能導致不希望的效果。你有沒有直接引用slidecontent的理由？