工具欄的JavaScript引腳到/ onmouseover事件衝突

Question

我正在使用JavaScript工具欄。這個工具欄的常規高度是50px。在鼠標懸停時，它的高度變化爲500px。但是，在這個工具欄上，有一個小小的圖釘。我的目的是使這一形象改變工具欄div的高度500像素，讓它保持下去。目前，我可以改變工具欄的div與圖像，但它的onmouseout變回原來的50像素高度。

我怎樣才能讓這個被點擊的引腳圖像時，該功能鼠標移開停止工作，直到圖像再次點擊？

如果有幫助，這是我的代碼：

//Pin to Image 

<img class="pin" onClick = "document.getElementById('toolbar').style.height 
= '500px';" src="images/pin.png" width="20px" height="20px" /> 


//JavaScript for mouseoverevent 

$(document).ready(function() { 

$("#toolbar").hover(

    //on mouseover 
    function() { 
     $("#toolbar").animate({ 
      height: '550' 
     }, 'slow'); 
    }, 

//on mouseout 
    function() { 
     $(this).animate({ 
     height: '-=500px' 
     }, 'slow'); 
    } 
    ); 
}); 

Answer 1

下面的代碼應該做的伎倆（如果它工作肯定我沒有測試過）。可以肯定地完成了一個更好的方法（可能與切換）：

<img class="pin" height="20px" src="images/pin.png" width="20px"/> 

//JavaScript for mouseoverevent 
$(document).ready(function() { 
    var isPinned = false; 
    $(".pin").click(function(){ 
    $("#toolbar").css('height', '500px'); 
    isPinned = true; 
    }); 


    $("#toolbar").hover(
    //on mouseover 
    function() { 
     if(!isPinned) { 
      $("#toolbar").animate({ 
      height: '550' 
      }, 'slow'); 
     } 
    }, 

    //on mouseout 
    function() { 
     if(!isPinned) { 
      $(this).animate({ 
      height: '-=500px' 
      }, 'slow'); 
     } 
    } 
    ); 
}); 

Answer 2

創建存儲工具欄上的狀態的標誌變量。在mouseout函數中寫入一個條件，在狀態爲'固定'時繞過高度變化。

Answer 3

從圖像中刪除的onclick和補充一點：

$('.pin').click(function(){ 
    $(this).toggleClass('.pinned'); 
    if(parseInt($('#toolbar').css('height')) < 500) $("#toolbar").animate({ 
     height: '550' 
    }, 'slow'); 
}); 

和編輯#toolbar懸停功能：

$("#toolbar").hover(
    function() { 
     // return if its pinned 
     if($('#toolbar .pin').hasClass('pinned')) return; 
     $("#toolbar").animate({ 
      height: '550' 
     }, 'slow'); 
    }, 

    function() { 
     // return if its pinned 
     if($('#toolbar .pin').hasClass('pinned')) return; 
     $(this).animate({ 
     height: '-=500px' 
     }, 'slow'); 
    } 
    ); 
}); 

現在你可以使用.pinned類可視化的狀態工具欄。