jquery - CSS 挑战 : jQuery's slideDown-like on a specific particular layout

Question

已关闭。此问题不符合 Stack Overflow guidelines 。目前不接受答案。

---

有关您编写的代码问题的问题必须在问题本身中描述具体问题 - 并包含有效代码以重现该问题。请参阅SSCCE.org寻求指导。

已关闭 9 年前。

Improve this question

我正在寻找经典的 jQuery slideDown -类似，但我找不到适合我需要的布局的解决方案:

当点击红色 Angular 时，我需要相应的橙色框出现在 jQuery 的 slideDown 中方式。红色 Angular 也必须与橙色盒子一起滑落，就像它没有固定在黄色盒子上，而是与橙色盒子固定在一起一样。因此，在红色 Angular 最初所在的位置，背景实际上也变成了橙色，以强调效果。当然，当重新单击红色 Angular 时，橙色框必须向上滑动，并且红色 Angular 会回到原来的位置(toggle -类似)。

我使用 z-index 尝试了一些技巧, overflow:hidden等等，但我不得不承认我完全陷入了这个 CSS 技术挑战......

这是一个fiddle你可以玩;)

Answer 1

为包含切换开关和消息的框的底部添加一个包装器，将包装器的高度设置为切换器的高度，然后将消息放置在 View 下方。然后，将另一个 div 作为橙色三 Angular 形添加到 li 中，使其位于红色三 Angular 形和消息框的后面。最后，单击时，只需以动画方式切换包装器的高度和底部位置即可。

html:

<ul>
    <li><div class="triangle"></div><div class="pop"><div class="toggle"></div><div class="orange">Hello World!</div></div></li>
    ...

JavaScript:

$('.toggle').click(function() {
    $parent = $(this).parent();
    if ($parent.data("flag")) {
        $parent.data("flag",false);
        $parent.animate({height:"30px",bottom:"0"});
    }
    else {
        $parent.data("flag",true);
        $parent.animate({height:"90px",bottom:"-60px"});
    }
});

CSS:

.pop {
    width: 100px;
    height: 30px;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    z-index: 99;
}
.toggle {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent red transparent;
    bottom: 0;
    right: 0;
    cursor: pointer;
    z-index: 99;
}
.triangle {
    position: absolute;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 0 30px 30px;
    border-color: transparent transparent orange transparent;
    bottom: 0;
    right: 0;
    cursor: pointer;
    z-index: 99;
}
.orange {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: orange;
}

fiddle :http://jsfiddle.net/qdc7n/2/