絕對位置上的Jquery Slide效果Div

Question

我在某些position:absoluteDivs上使用幻燈片效果（slideToggle，在這種情況下）時遇到了一些麻煩。

在我完成position工作之前 - 我需要邊界箭頭 - 它完美地工作。但是，在我使用position:absolute後，divs效果不再起作用。所以，我認爲這與Div不存在的效果有關係嗎？

我的HTML：

<div style="width: 200px; border-width: 1px; border: dotted" onclick="clickDiv();"> 
    click me 
</div> 
<div id="DivTeste"> 
    <div class="chat-bubble-arrow-border"></div> 
    <div class="chat-bubble-arrow"></div> 
    <div class="teste box"> 
     <p>e</p> 
     <p>e</p> 
     <p>e</p> 
     <p>e</p> 
     <p>e</p> 
    </div> 
</div> 

我的CSS：

.box { 
    overflow: auto; 
    display: block; 
    height:100px; 
    width: 200px; 
    border-width: 1px; 
    border: solid; 
    top: 50px; 
    position:absolute; 
} 

.chat-bubble-arrow-border { 
    border-color: transparent transparent #000 transparent; 
    border-style: solid; 
    border-width: 10px; 
    height:0; 
    width:0; 
    position:absolute; 
    top: 30px; 
    left:30px; 
} 


.chat-bubble-arrow { 
    border-color: transparent transparent #fff transparent; 
    border-style: solid; 
    border-width: 10px; 
    height: 0; 
    width: 0; 
    position: absolute; 
    left: 30px; 
    top: 33px; 
    z-index: 100; 
} 

而我的JS：

$(function() { 
    $('#DivTeste').hide(); 
}); 

function clickDiv() { 
    $('#DivTeste').slideToggle(); 
} 

Answer 1

我剛剛取代了代碼，並使它在相對位置上工作。

從類中更改此二：

top: 16px; 
    position: relative; 

http://jsfiddle.net/sanman/4xsZM/

你爲什麼不使用類似qTip它所看來你正在嘗試做的。

Answer 2

退房的解決方案我想你。無論如何稍微修改了你的編碼，但沒有什麼大不了

click here for JS Fiddle

$(document).ready(function(){ 
 
    $('#click').click(function(){ 
 
     $('#DivTeste').slideToggle(500); 
 
    }) 
 
});

.box { 
 
    overflow: auto; 
 
    display: block; 
 
    height:100px; 
 
    width: 200px; 
 
    border-width: 1px; 
 
    border: solid; 
 
    top: 50px; 
 
    position:absolute; 
 
} 
 

 
#DivTeste{ 
 
display:none; 
 
} 
 

 
.chat-bubble-arrow-border { 
 
    border-color: transparent transparent #000 transparent; 
 
    border-style: solid; 
 
    border-width: 10px; 
 
    height:0; 
 
    width:0; 
 
    position:absolute; 
 
    top: 30px; 
 
    left:30px; 
 
} 
 

 

 
.chat-bubble-arrow { 
 
    border-color: transparent transparent #fff transparent; 
 
    border-style: solid; 
 
    border-width: 10px; 
 
    height: 0; 
 
    width: 0; 
 
    position: absolute; 
 
    left: 30px; 
 
    top: 33px; 
 
    z-index: 100; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div id="click" style="width: 200px; border-width: 1px; border: dotted; cursor:pointer"> 
 
    click me 
 
</div> 
 
<div id="DivTeste"> 
 
    <div class="chat-bubble-arrow-border"></div> 
 
    <div class="chat-bubble-arrow"></div> 
 
    <div class="teste box"> 
 
     <p>e</p> 
 
     <p>e</p> 
 
     <p>e</p> 
 
     <p>e</p> 
 
     <p>e</p> 
 
    </div> 
 
</div>

希望有所幫助。