javascript - 将两个不同的 jquery 点击事件分配给同一个项目

Question

我的网站上有一个按钮，该按钮具有 jquery，可在单击时更改其他元素的一些 css。

当第二次单击按钮时，我想分配另一个函数来反转 css 更改。

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

我希望能够.mobileitem再次单击并将 css 更改为 bottom:0 display:none 对于它们各自的元素。

每次我单击 .mobileitem 时，它都应该介于两者之间。

我认为它是 .toggle() 但不确定正确的语法或是否有更好的方法

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

这应该工作！

Answer 2

试试这个

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

或者只是使用.toggle()尽管它已被弃用并且可能被删除。（不知道替换的是什么）

Answer 3

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

Answer 4

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

这是一个使用 TOGGLE 功能的更简洁、更简洁的示例。它也会起作用。:)

Answer 5

你可以写两个css类

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

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

点击事件

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