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

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

You could do it something like this:

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

Answer 2

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

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

Javascript：

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

CSS：

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

Answer 3

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

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

我不确定那代码是否正确，因为我是徒手写的，但我认为你可能需要一些类似的东西。