Question

我在某些position:absolute Divs上使用幻灯片效果（在本例中为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>

希望有所帮助。

绝对定位Div上的Jquery Slide效果

2 个答案: