Javascript 将两个不同的jquery单击事件分配给同一项

我在我的站点上有一个按钮，它有一个jquery，可以在单击时更改其他元素的一些css

我想分配另一个函数，以便在再次单击按钮时反转css更改

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

我希望能够再次单击

.mobileitem

，并将css更改为其各自元素的底部：0显示：无

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

我认为是.toggle（），但不确定语法是否正确，或者是否有更好的方法

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

这应该管用

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

这应该管用

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

下面是一个使用切换功能的更简洁、更清晰的示例。 这也行。：）

下面是一个使用切换功能的更简洁、更清晰的示例。 这也行。：）

试试看

或者只是使用，尽管它已被弃用并可能被删除。（不确定更换的是什么）

试试看

---

或者只是使用，尽管它已被弃用并可能被删除。（不确定替换是什么）

您可以编写两个css类

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

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

点击事件

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

---

您可以编写两个css类

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

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

点击事件

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

试试这个：

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

试试这个：

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

---

您也可以使用toggle来实现这一点，因为您只需创建两个css类，然后您就可以使用它们进行洗牌。。。。为了便于参考，您也可以使用toggle来实现这一点，因为您只需创建两个css类，然后您就可以使用它们进行洗牌。。。。为便于参考，请在发布前遵循此操作。出于某种原因，它似乎对文档上的“.mobileitem”应用了

display:none

ready@gteh：

将显示：无应用于.mobileitem'

？但是我们什么时候把display:none应用到“.mobileitem”上的呢？在发布之前试过了。出于某种原因，它似乎对文档上的“.mobileitem”应用了

display:none

ready@gteh：

将显示：无应用于.mobileitem'

？但我们什么时候对“.mobileitem”应用display:none的？您错过了右括号和大括号…：）您错过了右括号和大括号…：）+感谢您提到.toggle（）已被弃用。好吧，它在1.8中被弃用，并在jQuery1.9中被删除。+1因为它提到.toggle（）已被弃用。嗯，它在1.8中被弃用，在jQuery1.9中被删除。