如何滑動切換僞元素？

正如您在此jsfiddle中看到的那樣，當您單擊菜單按鈕時，指向該按鈕的小三角形僅在動畫完成後才顯示。我希望動畫以僞元素開頭，然後進入下拉菜單元素。我怎樣才能做到這一點？如何滑動切換僞元素？

解決方案不一定非要使用javascript，CSS3會受到歡迎，我不擔心兼容性問題。

2012-08-29 Ashitaka

'slideToggle'完全隱藏了元素。如果你使用jQuery來使用'animate'切換'height'？ – ACJ

[操縱CSS：在使用jQuery的僞元素之前和之後]的可能的重複（http://stackoverflow.com/questions/5041494/manipulating-css-before-and-after-pseudo-elements-using-jquery），儘管你可以通過* JavaScript和CSS3的混合來實現這一點，但是我不確定你能得到多遠。 – BoltClock

這絕對不是重複的，但是這個問題的答案很能揭示我的無知。僞元素本身不是DOM的一部分，因此你不能直接用jQuery來選擇和操作它們。「謝謝！ – Ashitaka

你可以試試這個 - 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; 
}

來源

2012-08-29 01:24:52

不幸的是，這個答案不是那種語義，因爲它不使用僞元素，但效果非常流暢，我想我會使用它。謝謝！ – Ashitaka

@Ashitaka我已經更新了我的答案，同時順利和語義:) http://jsfiddle.net/SZWmd/32/ –

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

來源

2012-08-29 01:11:31 Oriol

如何滑動切換僞元素？

回答

相關問題