Question

我有一个jQuery下拉菜单系统，但有一个奇怪的问题，即在使用菜单后无法选择文本（例如复制/粘贴）。

查看小提琴here，然后在使用菜单前尝试选择示例文字。然后将鼠标悬停在菜单项上，无法再选择文本。

我需要在用户打开/关闭菜单后仍然可以选择文本。看看：

HTML结构：

<div class="oe_wrapper">
<div id="oe_overlay" class="oe_overlay"></div>
<ul id="oe_menu" class="oe_menu">
    <li><a href="">Home</a>

        <div class="hover-div">Content 1</div>
    </li>
    <li><a href="">Projects</a>

        <div class="hover-div">Content 2</div>
    </li>
    <li><a href="">No Hover</a>

        <div class="hover-div not-shown">This should not appear and no other menu divs or the dark overlay should be shown.</div>
    </li>
    <li><a href="">Events</a>

        <div class="hover-div">Content 4</div>
    </li>
    <li><a href="">Stores</a>

        <div class="hover-div">Content 5</div>
    </li>
</ul>

JS：

$(function () {
    var $oe_menu = $('#oe_menu');
    var $oe_menu_items = $oe_menu.children('li');
    var $oe_overlay = $('#oe_overlay');

    $oe_menu_items.bind('mouseenter', function () {
        var $this = $(this);
        $this.addClass('slided selected');
        if ($this.children('.hover-div').hasClass('not-shown')) {
            $oe_menu_items.not('.slided').children('.hover-div').hide();
            $this.removeClass('slided');
        } else {
            $this.children('.hover-div').css('z-index', '9999').stop(true, true).slideDown(200, function () {
                $oe_menu_items.not('.slided').children('.hover-div').hide();
                $this.removeClass('slided');
            });
        }

    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('selected').children('.hover-div').css('z-index', '1');
    });

    $oe_menu.bind('mouseenter', function () {
        var $this = $(this);
        $oe_overlay.stop(true, true).fadeTo(200, 0.6);
        $this.addClass('hovered');
    }).bind('mouseleave', function () {
        var $this = $(this);
        $this.removeClass('hovered');
        $oe_overlay.stop(true, true).fadeTo(200, 0);
        $oe_menu_items.children('.hover-div').hide();
    })
});

提前感谢您的帮助。再次，this是小提琴。

Answer 1

问题是你的div oe_overlay开始显示：无（好），然后淡出鼠标，然后淡出鼠标，但它没有被设置为显示：none再次＃＆＃ 39;有效地屏蔽了页面上的所有其他输入。

你需要的只是在你消失之后隐藏div：

$oe_overlay.stop(true, true).fadeTo(200, 0, function() {
    $(this).hide();
});

<强> See updated fiddle

jQuery：页面文本不可选

1 个答案: