jQuery的addClass後/前

<div id="box"></div> 
<div class="text"></div>? 



$(document).ready(function() { 
$('#box').click(function() { 
     $('.text').slideToggle('slow'); 
    }); 


}); 


#box{ 
height:40px; 
width:100px; 
background:red; 
} 

#box:hover{background:blue;} 

#box:after{ 
content: ""; 
height: 10px; 
position: absolute; 
width: 0; 
margin-top:40px; 
margin-left:40px; 
border: 10px solid transparent; 
border-top-color: red; 
} 


#box:hover:after{ 

border-top-color: blue; 
} 

.text{ 

display:none; 
height:40px; 
width:100px; 
background:#fd0; 
margin-top:20px; 
}

http://jsfiddle.net/zfQvD/16/jQuery的addClass後/前

這是可能使用jQuery添加樣式after箭頭？當text class已關閉，刪除after箭頭類如果顯示text class，那麼添加箭頭？我試過了，但似乎不起作用

來源

2012-11-14 olo

你能改寫你要完成的任務在點擊框添加一行到您的JS這個類？你的措詞有點遺失 – AJak

你不能在JavaScript中設計僞元素，因爲它們實際上不存在於DOM中。使用一個普通的標籤，而不是.. – elclanrs

只需添加樣式箭頭時/展開/，刪除箭頭時不/擴大/ – olo

根據@elclanrs評論，你不能添加與JS的僞元素。你能做什麼，但是，聲明他們在你的CSS當父元素有一個特定的類中僅顯示，然後切換此類JS，就像這樣：

#box.expanded:after { 
content:''; 
height: 10px; 
position: absolute; 
width: 0; 
margin-top:40px; 
margin-left:40px; 
border: 10px solid transparent; 
border-top-color: red; 
}

您還必須添加一個

$('#box').click(function() { 
    $(this).toggleClass('expanded'); 
    $('.text').slideToggle('slow'); 
});

在這裏看到的例子：http://jsfiddle.net/zfQvD/17/

來源

2012-11-14 02:45:04 unclenorton

真的很好的解決方案。非常感謝 – olo

如果我不能上課怎麼辦？就像說的那樣，我的風格是動態的，從JS計算出來，我需要將這種風格變爲.foo：before。有沒有辦法做到這一點？ –

jQuery的addClass後/前

回答

相關問題