Question

我的网站上有一个按钮，其中包含jquery，可以在点击时更改其他元素的css。

我希望在第二次单击按钮时指定另一个功能来反转css更改。

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

我希望能够再次点击.mobileitem并将css更改为底部：0显示：无各自的元素。

每次点击.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

尝试this

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

或者只是使用.toggle()，尽管它已弃用且可能已删除。（不确定替换是什么）

Answer 3

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

这是使用TOGGLE功能的更整洁，更清洁的示例。它也会起作用。：）

Answer 4

你可以写两个css类

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

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

点击活动

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

Answer 5

试试这个：

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

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

5 个答案: