Question

I have a list which is inside a list item:

       <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>

I’m using jQuery to toggle the color of the list item with class name “del-display” so it changes it’s colour to orange. However, the item it self doesn’t display when I save and run my toggle code:

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

I’ve made a fiddle here: http://jsfiddle.net/noscirre/3fwZn/

Any help will be much appreciated.

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"});
    }
});