jQuery懸停菜單

Question

當您滾動Google搜索結果時，如果將鼠標懸停在搜索結果上，會彈出右側菜單（顯示網站結果的快照）。

我有如下特徵：

• 用戶在瀏覽餐廳的菜單
• 他/她選擇要添加到購物車
• 我沃爾德想顯示右側的菜單項將鼠標懸停在某個物品上時，可以在用戶選擇物品時看到該側面菜單中的購物車詳細信息（用戶甚至可以從該購物車中刪除顯示在右側菜單中的物品）。

我可以用jQuery來做這個嗎？有沒有可用的插件？這更像是一個「懸停菜單」。

謝謝！

Answer 1

創建一個隱藏的div。使用後：

$("#id").show(); 
$("#id").hide(); 

希望它可以幫助

你可以從一些insperation：

• http://home.comcast.net/~littlemoe85/thumbhover/index.html
• http://craigsworks.com/projects/simpletip/

Answer 2

$('#menu li.items').hover(function() { 
    // show right-side menu and populate it with info about item 
}, function() { 
    // hide right-side menu 
}).click(function() { 
    // show cart-details in right-side menu and lock it 
}); 

Answer 3

我BELI前夜你正在尋找的東西，如：

<ul id="storeItems"> 
    <li>Item1</li> 
    <li>Item2</li> 
    <li>Item3</li> 
    <li>Item4</li> 
</ul> 

<ul id="hoverMenu"> 
    <li>inCart1</li> 
    <li>inCart1</li> 
    <li>inCart1</li> 
</ul> 

<script> 
var hoverMenu = $('#hoverMenu'); 
$(hoverMenu).hide(); 

$('#storeItems li').hover(function() { 
    $(this).append(hoverMenu); 
    $(hoverMenu).show(); 
}, function() { 
    $(hoverMenu).hide(); 
}); 
</script> 

添加懸停菜單給你徘徊讓你捲進懸停菜單沒有它下降（因爲你不會被軋斷你是該項目的事徘徊）。

• 使用「添加」方法允許使用只有一個「懸停菜單」因爲追加的情況下將只是移動的項目，如果它是在頁面上了。

演示 - http://jsfiddle.net/joalbright/4mAYE/

Answer 4

雖然最有可能的插件，做similiar的事情，這不應該是這麼難實現。

假設這樣的結構：

<ul class="restaurant-menu"> 
    <li> 
     <a href="tastymenu.html"><img src="yummy.jpg" alt="" /></a> 
     <div class="info" style="display:none;"> 
     <!-- you could put all kinds of info here --> 
     </div> 
    </li> 
</ul> 

...你可以做這樣的事情：

$(function() { 
    $('.restaurant-menu li a').hover(function() { 
     // add the contents of .info to the menu info div and show it 
     $('#menu-info').html($('.info', this).html()).show(); 
    }).mouseout(function() { 
     // hide the menu info div 
     $('#menu-info').hide(); 
    }).click(function() { 
     // do other stuff 
    }); 
});