Why toggle works on double-click?!

Why toggle works on double-click?!

Anyone knows why this only works on double-click not one- click?

      $('.abc').css({"background-image": "url(/design/frontend/images/dropDownMenuS.png)" ,"background-repeat": "no-repeat"});
        $('.abc').click(function() {
           
            $(this).toggle(
           
              function () {
               $(this).css({"background-image": "url(/design/frontend/images/dropDownMenuSdown.png)" ,"background-repeat": "no-repeat"});
              
              },
              function () {              
               $(this).css({"background-color": "red" }); $(this).css({"background-image": "url(/design/frontend/images/dropDownMenuS.png)" ,"background-repeat": "no-repeat"});
              }
         
           );

        })