Question

我想创建一个小菜单，通过悬停元素来定位（将在两个元素之间显示）。之后将鼠标移动到＆＃34; X＆＃34;将滑动菜单，其中显示一些按钮。但菜单有一些显示和悬停的错误。我也不喜欢我试过的代码。我认为这可以做得更聪明......

更新：行为应如下所示：如果光标位于.item上，则菜单应显示在左上角 - 两个.item中间。箭头应指向这两个.item之间的空间。菜单只显示＆＃34; X＆＃34 ;;按钮是隐藏的。如果光标指向＆＃34; X＆＃34;，则会显示按钮（slideDown），因此用户可以单击这些按钮。对我来说一个问题是，首先（当显示＆＃34; X＆＃34;时）宽度仅为25px。显示按钮时，宽度会发生变化，因此容器必须向左展开。

请看这里：

JSFiddle： http://jsfiddle.net/b1gpd1n1/1/

JS：

$(document).on('mouseenter', '.item', function( event ) {
    var left = $(this).offset().left - 50;
    $(".item_menu").css("left", left).css("top", $(this).offset().top - 15);
        $(".item_menu").hover(function() {
            var that = this;
            $(this).find('header').fadeOut(200);
            $(this).animate({'left': left-90, 'width': 120}, 200, function() {
                $(that).find('.buttons').slideDown(200);
            });

        }, function() { 
            $(this).animate({'left': left, 'width': 25}, 200);
            $(this).find('header').fadeIn(200);
            $(this).find('.body').slideUp(400); 
        });
});

HTML：

<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

<div class="item_menu">
    <header>X</header>
    <div class="buttons"><button>Example</button></div>
    <div class="arrow"></div>
</div>

如果您能查看代码以改进它，我将非常高兴。

我的问题：

改进箭头，该箭头应显示在右上角（顶部有一点边缘）
菜单中是否有更好的HTML构造？
将鼠标悬停在菜单上会显示一些错误

Answer 1

经过多次更新后，here I go：

$(function(){
    var time = 400;
    var item = $(".item_menu");

    var item_width_button = item.width();
    $(".buttons button").hide();
    var item_width = item.width();

    var item_padding = item.css("padding");
    var pos = $(".item:first").offset();

    item.css({
        "right": ($(document).width() - pos.left) + "px",
        "top": (pos.top + $(".arrow").height()) + "px",
        "width": "0"
    });

    var now;
    $(".wrap .item").on("mouseenter", function(){
        now = $(this);
        show_item();
    });
    $("header").on("mouseenter", function(){
        show_buttons();
    });
    item.on("mouseleave", function(){
        show_item();
    });

    function show_item () {
        $(".buttons button").stop().slideUp(time, function(){
            item.show().stop().animate({
                "top": now.offset().top + "px",
                "width": item_width + "px",
                "padding": item_padding
            }, time);
        });
        $(".arrow").fadeIn(time);
    }

    function show_buttons(){
        item.animate({
            "width": item_width_button + "px",
        }, time, function(){
            $(".buttons button").stop().slideDown(time);
        });
        $(".arrow").fadeOut(time);
    }

});

用于悬停动态元素的CSS和JQuery错误

1 个答案: