设置滑动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的理由？