javascript - 疑似要素をスライドして切り替える方法は?

Question

このjsfiddleでわかるように、メニュー ボタンをクリックすると、ボタンを指す小さな三角形は、アニメーションが終了した後にのみ表示されます。アニメーションを疑似要素から始めて、ドロップメニュー要素に進むようにしたいと思います。どうすればこれを達成できますか?

解決策は必ずしも JavaScript を使用する必要はありません。CSS3 は大歓迎です。互換性の問題については心配していません。

Answer 1

これを試すことができます -デモ

.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/