如何滑动切换伪元素？答案

【问题标题】：How to slide toggle a pseudo element?如何滑动切换伪元素？
【发布时间】：2012-08-29 00:58:27
【问题描述】：

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

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

【问题讨论】：

slideToggle 完全隐藏了元素。如果您使用 jQuery 来切换 height 使用 animate 怎么办？
Manipulating CSS :before and :after pseudo-elements using jQuery 的可能重复项，尽管您可以通过 both JavaScript 和 CSS3 的组合来实现这一点，但我不确定您能走多远.
这肯定不是重复的，但是这个问题的答案很能说明我的无知。 pseudo-elements themselves are not part of the DOM, and thus you can't select and manipulate them directly with jQuery. 谢谢！

标签： javascript jquery html css pseudo-element

【解决方案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;
}

【讨论】：

不幸的是，这个答案不是那么语义化，因为它不使用伪元素，但效果更流畅，我想我会使用它。谢谢！
@Ashitaka 我已经更新了我的答案，使其既流畅又符合语义:) jsfiddle.net/SZWmd/32

【解决方案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/

【讨论】：