Question

我有一个列表在列表项目中：

       <ul id="selected-list" class="droptrue sort-drop">
            <li class="sortedli" style="">Call list
                <ul id="select-navlist" style="float: right;">
                    <li class="sel-display">xx</li>
                    <li><a href="#">aa</a></li>
                    <li><a href="#">bb</a></li>
                    <li><a href="#">cc</a></li>
                    <li><a href="#">dd</a></li>
                    </ul>
               </li>
          </ul>

我正在使用jQuery来切换列表项的颜色，类名为“del-display”，因此它将颜色更改为橙色。但是，当我保存并运行我的切换代码时，它自己不显示的项目：

$(".sel-display").toggle(function () {
            $(this).css("background", "#ffcc00");
            //$(this).css("background-position", "140px 5px");
    });

我在这里做了一个小提琴：http://jsfiddle.net/noscirre/3fwZn/

非常感谢任何帮助。

Answer 1

我认为您需要对具有某个类名的所有列表项进行查找，如下所示：

$('.sel-display').find('li').hasClass('del-display');

我不确定那些代码是否正确，因为我写的是自由的，但我认为你可能需要这些内容。

Answer 2

你可以这样做：

$('.sel-display').click(function(){
    if($(this).hasClass("highlighted")){
        $(this).removeClass("highlighted");
        $(this).css({"background", "#ffffff"});
    }else{
        $(this).addClass("highlighted");
        $(this).css({"background", "#ffcc00"});
    }
});

Answer 3

不是最好的解决方案，但它是什么？

http://jsfiddle.net/3fwZn/7/

<强>使用Javascript：

$(".sel-display").click(function () {
    $(this).toggleClass('del');
});

<强> CSS：

.del {
    background-color: #ffcc00 !important;
}

Jquery切换不适用于列表项中的列表项

3 个答案: