將兩個不同的jquery點擊事件分配到同一個項目

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

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

這是一個更清潔，使用TOGGLE功能的更簡潔的示例。 它也能工作。 :)

Answer 3

嘗試this

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

或者只是使用.toggle()雖然它已被棄用，可能已經刪除。 （不知道是什麼的更換）

Answer 4

你可以寫兩個CSS類

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

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

On Click事件

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