javascript - jQuery 下拉菜单 : not showing one item

Question

我创建了一个 jQuery 下拉菜单，在悬停时显示 div 下拉菜单。

它用于网站的导航菜单，但问题是某些菜单项不需要下拉菜单，我无法隐藏这些元素的菜单。

这是 JSFiddle .我需要的是标题为“No Hover”的菜单项不显示下拉 div。

这是我正在使用的 JavaScript:

$(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');
    $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();
})

});

和 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">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>

感谢您的帮助!再一次，JSFiddle 是 here .

Answer 1

为该元素使用特定的 id 并检查它是否悬停，什么都不做!

if($(this).attr('id', 'TheID'))
    return false;