一鍵改變按鈕功能？

我做了一個按鈕點擊，我想打開/關閉我的側邊菜單。我這樣做：一鍵改變按鈕功能？

$("#middleleftopenclose").click(function() { 
    $("#middleleft").css("width", 0); 
    $("#middleleftopenclose").css("opacity", 1); 
    $("#middleright").css("margin-left", 15); 
});

我怎麼會去犯同樣的按鈕，點擊打開菜單回來呢？

感謝

來源

2012-11-22 pufAmuf

爲middleleft，middleleftopenclose和middleright創建類並使用.toogleClass（）函數 – Meliborn

當菜單打開時，這些CSS屬性是什麼？ – mattytommo

以及一個簡單的解決方案，你可以有一個布爾標誌，每一個按鈕被點擊時存儲的側邊欄的當前狀態和測試反對。

var sidebarVisible = false; 

$("#middleleftopenclose").click(function() { 
    if (sidebarVisible){ 
    // close sidebar 
    }else{ 
    // open sidebar 
    } 
    // toggle boolean flag each time button is clicked 
    sidebarVisible = !sidebarVisible; 
});

我看到你實際上是改變元素的CSS屬性的函數內...也許這將是更好地創建每個狀態的相應屬性類和簡單的互換類單擊該按鈕時，。 Meliborn在評論中提到了這一點。

來源

2012-11-22 22:17:51 Lix

謝謝，我會這樣做的！ – pufAmuf

非常歡迎您！我覺得添加和刪除CSS類可能是一個更優雅的方法來做到這一點，但你應該採用你覺得最舒服的方法。快樂的編碼！ – Lix

您可以使用jQuery：visible選擇器來查看側邊菜單是否可見。如果它是可見的，則隱藏，如果不可見，則顯示。

http://api.jquery.com/visible-selector/

$("#middleleftopenclose").click(function() { 

    var visible = $("#SIDEMENU").is(":visible"); 

    if(!visible){ 

     // NOT VISIBLE - SO SHOW 
     $("#middleleft").css("width", 0); 
     $("#middleleftopenclose").css("opacity", 1); 
     $("#middleright").css("margin-left", 15); 

    }else{ 
     // VISIBLE - SO HIDE IT 
     // WRITE YOUR CODE TO HIDE HERE 
    } 
});

來源

2012-11-22 22:20:59 ajtrichards

只要你的CSS和關閉添加到類，例如.closedMenuLeft，.closedMenuLeftOpenClose，.closedMenuRight，然後撥動它一下，就像這樣：

$("#middleleftopenclose").click(function() { 
    $("#middleleft").toggleClass("closedMenuLeft"); 
    $("#middleleftopenclose").toggleClass("closedMenuLeftOpenClose"); 
    $("#middleright").toggleClass("closedMenuRight"); 
})

來源

2012-11-22 22:21:05 mattytommo

即使，.toggleClass()將是完美的路要走。它缺乏更復雜操作的靈活性。

/* Aggregate in one CSS class, .active. */ 
.active #middleleft { width: 0; } 
.active #middleleftopenclose { opacity: 1; } 
.active #middleright { margin-left: 15; }

$("#middleleftopenclose").click(function() { 
    $("#middle").toggleClass("active"); 
});

考慮#middle作爲這些元素的父節點。

或者，您可以使用.toggle()事件。（請勿錯誤使用.toggle()動畫。）

$("#middleleftopenclose").toggle(function() { 
    // Show the element! 
}, function(){ 
    // Hide the element! 
});

這兩個函數將在點擊之間交替執行。這是一個內置的jQuery函數。

來源

2012-11-22 22:36:55 Alexander

一鍵改變按鈕功能？

回答

相關問題