Question

当您滚动Google搜索结果时，如果将鼠标悬停在结果上，则会显示一个弹出的右侧菜单（显示网站结果的快照）。

我有如下功能：

用户正在浏览餐馆菜单
他/她选择要添加到购物车的项目
我想在将鼠标悬停在某个项目上时显示右侧菜单，这样当他/她选择一个项目时，用户就可以在该侧边菜单中看到购物车详细信息（用户甚至可以从该购物车中删除项目显示在右侧菜单中。）

我可以用jQuery做到这一点吗？有可用的插件吗？它更像是“悬停菜单”。

谢谢！

Answer 1

创建一个隐藏的div。使用后：

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

希望有所帮助

你可以从以下地方进行一些检查：

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

我相信你正在寻找类似的东西：

<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

尽管有很多插件可以做类似的事情，但实现起来并不是那么难。

假设这样的结构：

<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
    });
});

jQuery悬停菜单

4 个答案: