Question

I have a list with class agg-drop, whose items have a class name sortedli. These items have 2 toggle states. I clone these items using .clone(true), which adds the item to a list with class name ‘all-drop’. Items in this list have 3 toggle states. Now if I were to toggle the item in the new cloned list, the first two clicks do nothing, presumably because it is going through the toggle functions sequentially and the toggles are dependent on class names. Is there anyway to prevent this?

$(".sortedli").toggle(function(){
    if( $(this).parent().hasClass('agg-drop') ){
          $(this).css("background","orange");
    }},
    function(){
    if( $(this).parent().hasClass('agg-drop') ){
          $(this).css("background","yellow");
    }},
    function(){
    if( $(this).parent().hasClass('all-drop') ){
          $(this).css("background","red");
    }},
    function(){
    if( $(this).parent().hasClass('all-drop') ){
          $(this).css("background","green");
    }},
        function(){
    if( $(this).parent().hasClass('all-drop') ){
          $(this).css("background","blue");
    }}
);

Answer 1

Does this work?

$(".sortedli").toggle(function(){
    if( $(this).parent().hasClass('agg-drop') ){
          $(this).css("background","orange");
    }},
    function(){
    if( $(this).parent().hasClass('agg-drop') ){
          $(this).css("background","yellow");
    }
}).toggle(function(){
    function(){
    if( $(this).parent().hasClass('all-drop') ){
          $(this).css("background","red");
    }},
    function(){
    if( $(this).parent().hasClass('all-drop') ){
          $(this).css("background","green");
    }},
        function(){
    if( $(this).parent().hasClass('all-drop') ){
          $(this).css("background","blue");
    }
});