javascript - 如何滑动切换伪元素？

Question

正如您在这个jsfiddle中看到的，当您单击菜单按钮时，指向该按钮的小三角形仅在动画完成后显示。我希望动画从伪元素开始，然后才进入下拉菜单元素。我怎样才能做到这一点？

解决方案不一定必须使用 javascript，CSS3 将是最受欢迎的，我不担心兼容性问题。

Answer 1

你可以试试这个 - DEMO

.drop-menu {
    display: none;
    position: relative;
    height: 60px;
    top: -20px;
}

.drop-menu ul::before {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    top: -30px;
    left: 30px;
    border-width: 15px;
    border-color: transparent transparent red transparent;
    border-style: solid;
}

.drop-menu ul {
    background-color: red;
    position: relative;
    top: 20px;
    z-index: 999;
}

Answer 2

见http://jsfiddle.net/SZWmd/23/

问题是在滑动时，元素必须有overflow:hidden，但是三角形也被隐藏了。

然后，您必须滑动.drop-menu ul而不是.drop-menu. 你可以很容易地做到

$('.drop-menu-button').click(function() {
    $('.drop-menu').toggleClass('visible');
    $('.drop-menu ul').slideToggle();
});

并使用此选择器：

.drop-menu.visible::before

但问题是，在向上滑动的时候，三角形一开始是隐藏的。

那么，你需要

$('.drop-menu-button').click(function() {
    if($('.drop-menu').hasClass('visible')){
        $('.drop-menu ul').slideUp('',function(){
            $('.drop-menu').removeClass('visible');
        });
    }else{
        $('.drop-menu').addClass('visible');
        $('.drop-menu ul').slideDown();
    }
});

编辑：

你也可以使用

$('.drop-menu-button').click(function() {
    $('.drop-menu').addClass('visible');
    $('.drop-menu ul').slideToggle('',function(){
        if(!$(this).is(':visible')){
            $('.drop-menu').removeClass('visible');
        }
    });
});

在这里看到它：http: //jsfiddle.net/SZWmd/31/