将两个不同的jquery click事件分配给同一项目

Question

I have a button on my site that has jquery that changes some css of other elements on click.

I want to assign another function to reverse the css changes when the button is clicked a second time.

$('.mobileitem').click(function(){
   $('.bottomfooter').css("bottom","75px");
   $('#mobilefoot').css("display", "block");
}); 

I want to be able to click .mobileitem again and have the css change to bottom:0 display:none for their respective elements.

Each time I click the .mobileitem it should go between the two.

I think it is .toggle() but not sure of the proper syntax or if there is a better way

Answer 1

$('.mobileitem').click(function(){
   var bot_val="75px";
   var dis_val="block";
   if($('.bottomfooter').css("bottom")==bot_val){
       bot_val="0px";
   }
   if($('#mobilefoot').css("display")==dis_val){
       dis_val="none";
   }
   $('.bottomfooter').css("bottom", bot_val);
   $('#mobilefoot').css("display", dis_val);
});

This should work!

Answer 2

Try this

function toggleClickEvents(item, click1, click2){
    $(item).off('click').on('click', function(){
        click1();
        toggleClickEvents(item, click2, click1);
    });
}

Or just use .toggle() although it is deprecated and possibly removed. (Not sure what the replacement is)

Answer 3

$('.mobileitem').toggle(function(){
   $('.bottomfooter').css("bottom","75px");
   $('#mobilefoot').css("display", "block");
}, function(){
   $('.bottomfooter').css("bottom","0px");
   $('#mobilefoot').css("display", "none");
});

Here's a neater, cleaner example using TOGGLE functionality. It'll work as well. :)

Answer 4

you can write two css classes

.bottom75
{
  bottom: 75px;
  display: block;
}

.bottom0
{
  bottom: 0px;
  display: none;
}

On click event

$('.mobileitem').click(function(){
  $(this).hasClass('bottom75') ? $(this).addClass('bottom0'): $(this).addClass('bottom75');
});

Answer 5

try this:

$('.mobileitem').click(function(){
   $(".bottomfooter, #mobilefoot").toggle(function() {
   $('.bottomfooter).css('bottom','75px');
   $('#mobilefoot').css('display', 'block');
   }, function () {
   $('.bottomfooter').css('bottom','0');
   $('#mobilefoot').css('display', 'none');
   });
});