Question

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

Expected output

当点击红色角落时，我需要相应的橙色框以 jQuery的slideDown方式显示。红色的角落也必须用橙色的盒子向下滑动，就好像它没有固定在黄色的盒子上，而是用橙色的盒子固定。因此，在最初的红色角落的地方，背景实际上也是橙色，以强调效果。当然，当重新点击红色角落时，橙色框必须向上滑动，红色角落适合其原始位置（toggle - 就像）。

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

以下是您可以使用的fiddle;）

Answer 1

好吧，我只能用css，html和jQuery来解决这个问题。

首先我如何构建html，

<li class="content-box">
    <div class="slide">
        <span class="red-tri"></span>
        <span class="slide-info">
            I was hidden!
        </span>
    </div>
</li>

接下来css创建效果，

.content-box {
   width: 100px;
   height: 100px;
   background: yellow;
   margin: 20px auto;
   position: relative;
}

.red-tri {
   border-bottom: 30px solid red;
   border-left: 30px solid transparent;
   border-right: 0 solid transparent;
   position: absolute;
   bottom: 0;
   right: 0;
}

.slide {
   transition: all 0.6s ease;
   -webkit-transition: all 0.6s ease;
   -moz-transition: all 0.6s ease;
   -ms-transition: all 0.6s ease;
   -o-transition: all 0.6s ease;
   width: 100%;
   height: 100%;
   display: block;
   top: 0;
   position: absolute;
   z-index: 100;
}

.slide.active {
   background: #ff9900;
   top: 100%;
   height: 50px;
   z-index: 110;
}

.slide.active:after {
   content: "";
   border-bottom: 30px solid #ff9900;
   border-left: 30px solid transparent;
   border-right: 0 solid transparent;
   position: absolute;
   top: -30px;
   right: 0;
}

.slide-info {
   display: none;
}

.slide-info.active {
   display: block;
}

最后，jQuery的一点点，

$('.red-tri').on('click', function() {
   $(this).parent().toggleClass('active');
   $(this).parent().find('.slide-info').toggleClass('active')
});

以下是JSFIDDLE，了解效果如何。

Answer 2

为包含切换和消息的框的底部添加一个包装器，将包装器的高度设置为切换的高度，然后将消息定位在视图之外。然后，将另一个div添加为li的橙色三角形，以便它将位于红色三角形和消息框的后面。最后，点击时，只需动画切换包装器的高度和底部位置。

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;
}

小提琴：http://jsfiddle.net/qdc7n/2/

CSS挑战：jQuery在特定的特定布局上的slideDown

2 个答案: