Question

在使用jquery更改颜色时，无法获取列表中的项目符号/数字以与列表的其余部分一起更改颜色。

使用： $（'ul li'）。css（'color'，'＃2b2b2b'）;

这会更改列表条目中文本的颜色，但是项目符号点保持原始颜色。

Before changing color After changing color

有谁知道怎么解决这个问题？提前谢谢。

Answer 1

经过一些修修补补后，我发现列表样式元素无法动画显示。如果您希望子弹的颜色动态更改，则需要重新定义list-style-type并将其更改为其他值，以便浏览器重新绘制。

检查更新的小提示，演示所描述的行为：http://jsfiddle.net/prycc8gs/2/

Answer 2

有序/无序列表working jsfiddle demo

＆＃13;

$(function () {
    $("#change").on("click",function(e) {
        e.preventDefault();
        $('ul > li, ol > li').css({'color': 'red','list-style-type': 'none'});
        window.setTimeout(function () {
            $('ul > li').css('list-style-type', 'initial');
            $('ol > li').css('list-style-type', 'decimal');
        }, 1);
    })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<ol>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ol>
<ul>
    <li>test</li>
    <li>test</li>
    <li>test</li>
</ul>
<button id="change">Change color</button>

＆＃13;

Answer 3

结合并使用@henser＆amp; @turbopipp

默认列表样式似乎不会在触发事件时更改颜色（文档就绪排除）。

但是，您可以切换到另一种样式并返回

$('ul > li').css('color', "green");
$('ul > li').css('list-style-type', 'square');
$('ul > li').css('color', "cyan");
$('ul > li').css('list-style-type', 'disc');

updated fiddle

或者，如果您有权访问并希望使用CSS，那么第二条建议就是 - 自己制作子弹。

Answer 4

您也可以使用$(document).ready(function(){ $("#change").click(function() { $('ol').css('color', 'red'); }) });事件在jQuery中执行此操作。

此示例带有数字：

＆＃13;

ol { 
  counter-reset: item; 
}

ol li { 
  display: block; 
}

ol li:before {
  content: counter(item) ". ";
  counter-increment: item;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ol>
  <li>item</li>
  <li>item</li>
  <li>item</li>
</ol>
<button id="change">Change text color</button>

＆＃13;

mLayout.setAnchorPoint((getScreenHeight()-getStatusBarHeight())/getScreenHeight(‌));
}

public float getScreenHeight() {
    DisplayMetrics metrics = getResources().getDisplayMetrics();
    float height = metrics.heightPixels; return height;
}

public float getStatusBarHeight() {
    int result = 0;
    int resourceId = getResources().getIdentifier("status_bar_height", "dimen", "android");
    if (resourceId > 0) {
        result = getResources().getDimensionPixelSize(resourceId);
    }
    return result;
}

＆＃13;

Jquery CSS Color不更新列表项目符号

4 个答案: