jQuery顯示/隱藏面板，然後將鼠標懸停在面板上的內容中

我有一個項目列表，我想在項目列表項目懸停時顯示相關面板。我有它的工作，但問題是，我不能懸停在面板內的內容，因爲我使用mouseleave功能，因爲顯而易見的原因，我已經懸停在鏈接列表項上。jQuery顯示/隱藏面板，然後將鼠標懸停在面板上的內容中

我已經在這幾天，不能制定出什麼需要做是爲了將相關面板開放邏輯，所以我可以在它懸停，然後點擊內它更多的鏈接。

我試圖在懸停狀態添加類的面板，但似乎並沒有擦出火花。

我的HTML是：

<div id="item-wrapper"> 
    <ul> 
     <li><a href="#" id="item-1">Item 1</a> 
     </li> 
     <li><a href="#" id="item-2">Item 2</a> 
     </li> 
    </ul> 
</div> 

<div id="panel-1" class="panel"> 
    <h2>This is panel 1!</h2> 
    <a href="#">read more 1...</a> 
</div> 

<div id="panel-2" class="panel"> 
    <h2>This is panel 2!</h2> 
    <a href="#">read more 2...</a> 
</div>

我的基本jQuery是：

$('#item-1').mouseenter(function() { 
    $('#panel-1.panel').toggle(); 
}); 

$('#item-1').mouseleave(function() { 
    $('#panel-1.panel').toggle(); 
}); 

$('#item-2').mouseenter(function() { 
    $('#panel-2.panel').toggle(); 
}); 

$('#item-2').mouseleave(function() { 
    $('#panel-2.panel').toggle(); 
});

...然後我有一些CSS其中面板被設置爲display: none開始。請注意，如果兩個列表項鍊接都沒有被佔用，那麼面板應該消失，如果之前有人打開過。

Fiddle demo here...

來源

2013-08-27 Danny Englander

在我看來，解決這個唯一真正的辦法是包裝元素中的隱藏要素，你徘徊，使mouseleave事件可以綁定到包裝。

LINK更新：在元件上 here's a fiddle

我也使用的數據屬性來跟蹤打開哪個面板。這樣，你只需要下面的代碼：

$('#item-wrapper a').mouseenter(function (e) { 
    if ($(this).data('panel')) { 
     $('.panel').hide(); 
     $('#' + $(this).data('panel')).show(); 
    } 
}); 
$('#item-wrapper').mouseleave(function() { 
    $('.panel').hide(); 
});

編輯：增加了一個條件，使在面板確保錨標籤不觸發懸停事件。

來源

2013-08-27 20:48:38

直到我將鼠標懸停在面板上的一個鏈接上，然後觸發面板隱藏爲止。 –

已更新，以處理新的要求。 –

這似乎是一個超優雅的解決方案，但問題是我在遺留的網站。我會猜測並說HTML5'data-'屬性在傳統的XHTML網站中不起作用？有沒有其他解決方法，也許使用類似'rel ='屬性排序？ –

有兩件事情：

用戶在li懸停事件處理程序，而不是a。
這允許您將您的內容移動到li S，讓徘徊的內容意味着你仍然徘徊在其父的li。

jQuery的：

$('#item-1').parent().hover(function() { 
    $('#panel-1.panel').toggle(); 
}); 

$('#item-2').parent().hover(function() { 
    $('#panel-2.panel').toggle(); 
});

Forked jsFiddle

來源

2013-08-27 20:46:38

你應該提到你已經將'div'移到'li'裏面，而不是在'ul'後面。這是一個關鍵點。 –

謝謝，澄清說。 –

@JamesMontagne有一個很好的觀點。我需要像在我的例子中那樣擁有dom結構，這使得這有點棘手。這是我的CMS減少的測試用例，內容面板不能位於實際的列表項鍊接下。 –

jQuery顯示/隱藏面板，然後將鼠標懸停在面板上的內容中

回答

相關問題