滑動側邊欄，按鈕消失，條件語句

Question

首先，這裏是我工作的主題，有沒有什麼幫助。 （x）

我試圖讓側邊欄可摺疊。那麼，用這個jQuery得到的結果呢，它確實崩潰了。這是箭頭按鈕，正在扼殺我。

這裏是我的代碼;它隻影響左邊欄，我想我可以複製這個並改變一些類和ID爲正確的。

$(document).ready(function(){ 
    $('#leftside').mouseenter(function(){ 
     $('#leftbutton.contained').fadeIn() 
    }); 
    if($('#leftside').is(':visible')) { 
     $('#leftside').mouseleave(function(){ 
      $('#leftbutton.contained').delay(800).fadeOut() 
     }); 
    } 
    $('#leftbutton').click(function(){ 
     $('#leftside').toggle("slide"); 
     $('#leftbutton').toggleClass("contained"); 
    }); 
}); 

我希望按鈕在合適的側欄懸停時出現，並在離開時消失。這很好，謝天謝地！但是，一旦邊欄消失，一旦它摺疊，按鈕也會消失。

類「載」只是現在沒有的顯示，順便說一句。我的理論是，如果我將該類附加到按鈕並將其切換，則該按鈕將在側欄繼續顯示後保持可見。不幸的是，情況並非如此。

我在做什麼錯？ （另外，在地平線上：在側欄滑入後，我希望箭頭在可見的情況下滑出主區域並掛在「.house」div的邊緣，以防觀衆想要的側邊欄了。我只是不懂怎樣做到這一點，這是動畫從左側和右側屬性的變化。一旦側邊欄切換回來了，它可以追溯到隱藏和揭示，當鼠標離開和進入，如果你有任何提示或這個不可避免的問題的答案，我會很感激！）

編輯：代碼建議給我仍然無法正常工作！我試圖也許做了另一個有條件的，但仍然不起作用。這是荒唐的。

$(document).ready(function(){ 
    if ($('#leftside').is(:visible)) { 
    $('#leftside').mouseenter(function(){ 
     $('#leftbutton.contained').fadeIn() 
    }); 
    $('#leftside').mouseleave(function(){ 
     $('#leftbutton.contained').delay(800).fadeOut() 
    }); 
    } else { $('#leftbutton').css("display:block") } 

我知道這可能是一個更經驗豐富的編碼器很明顯，但我很難過，有點沮喪。

Answer 1

JQuery的是沒有做像在嵌入式系統中的一些邏輯。您的if($('#leftside').is(':visible')) {僅在文檔加載時執行一次。然後，不管發生什麼，都不會被考慮在內。

我想我明白你的意圖是什麼。我認爲，不要讓側邊欄完全消失，您可以將其縮小到1-2像素，以便當用戶將鼠標移動到屏幕邊緣時，您可以觸發onhover事件以在所需的位置顯示箭頭。

VAR擴大=真

$('#leftside').hover(function(){ 
    //MouseEnter 
    $('#leftbutton.contained').fadeIn() 
}, function(){ 
    //Mouse leaves 
    $('#leftbutton.contained').delay(800).fadeOut() 
} 

$('#leftbutton').click(function(){ 
    if (expanded){ 
     $('#leftside').css("width", 2) 
     // Reposition #leftButton where you want when the left menu is NOT visible 
    } else{ 
     $('#leftside').css("width", DEFAULT_VALUE) 
     // Reposition #leftButton when the left menu IS visible 
    } 
    $('#leftbutton').toggleClass("contained"); 
    expanded = !expanded 
});