動態更改元素li的顏色不會更改子彈點的顏色

Question

在Chrome（版本45.0.2454.101 m）中，如果向列表元素添加類以更改其顏色，則子彈點顏色僅爲更新時重繪窗口（調整）

$("#a").click(function() {  
 
    $("#a").addClass('blue'); 
 
});

ul li { 
 
    color: red; 
 
    list-style-type: disc; 
 
    margin-left: 2em; 
 
} 
 
.blue { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="a">a</li> 
 
    <li id="b">b</li> 
 
    <li id="c">c</li> 
 
</ul>

它是在瀏覽器的錯誤，可以用代碼來解決？ （或者它是一個錯誤？）

Answer 1

可能是一個錯誤，但我不會依賴於標準光盤元素。

您可以使用CSS :: before僞元素代替。它更具可配置性，完全在您的控制之下。

$("#a").click(function() {  
 
    $("#a").addClass('blue'); 
 
});

ul li { 
 
    color: red; 
 
    list-style-type: none; 
 
    margin-left: 2em; 
 
} 
 

 
ul li::before { 
 
    content: "•"; 
 
} 
 

 
.blue { 
 
    color: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="a">a</li> 
 
    <li id="b">b</li> 
 
    <li id="c">c</li> 
 
</ul>

Answer 2

你可以使用一個假的CSS動畫強制重繪，直到這個bug已經修復。

$("#a").click(function() {  
 
    $("#a").addClass('blue'); 
 
});

ul li { 
 
    color: red; 
 
    list-style-type: disc; 
 
    margin-left: 2em; 
 
    -webkit-animation:1ms foo infinite; /* using prefix for webkit only */ 
 
} 
 
.blue { 
 
    color: blue; 
 
    
 
} 
 

 
@-webkit-keyframes foo { /* using prefix for webkit only */ 
 
    from { zoom: 0.99999; } 
 
    to { zoom: 1; } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<ul> 
 
    <li id="a">a</li> 
 
    <li id="b">b</li> 
 
    <li id="c">c</li> 
 
</ul>

或者，你可以使用：

$("#a").addClass('blue').hide().show(0);