Question

正如您在此jsfiddle中看到的，当您单击菜单按钮时，指向该按钮的小三角形仅在动画结束后显示。我希望动画以伪元素开始，然后才进入drop-menu元素。我怎么能做到这一点？

解决方案不一定要使用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/

如何滑动切换伪元素？

2 个答案: