jquery：更改css，如果頭被點擊

Question

我想添加一件事，我的代碼。現在，我有風格H3這樣的：

h3:before { 
font-family: 'ElegantIcons'; 
content: "\35"; 
float:left; 
} 

我想被點擊標題和內容打開這條線content: "\35";改爲content: "\38";。

HTML：

<h3>PS elementum justo ligula</h3> 
<div>elementum justo ligula, interdum scelerisque. 
<button>Close</button> 
</div> 

的jQuery：

$("h3").click(function() { 
$(this).next("div").slideToggle("slow"); 
}); 

Answer 1

更改類代替。

h3:before { 
font-family: 'ElegantIcons'; 
content: "\35"; 
float:left; 
} 

h3.alt:before { 
font-family: 'ElegantIcons'; 
content: "\38"; 
float:left; 
} 

JS：

$("h3").click(function() { 
$(this).addClass("alt"); 
$(this).next("div").slideToggle("slow"); 
}); 

Answer 2

的另一種方法是使用content: CSS作爲該元素的一些屬性值。

所做的更改

1. 添加的屬性節目內容的元素
   <h3 show-content="35">PS elementum justo ligula</h3>

2. 改變內容的CSS
   content: attr(show-content);

3. 改變JS更新該自定義屬性點擊
   $(this).attr('show-content','38');

JS小提琴鏈接：http://jsfiddle.net/mpsingh2003/bc60n7sy/