Question

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

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

这里是JSFiddle。我需要的是标题为＆＃34; No Hover＆＃34;不显示下拉列表。

这是我正在使用的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;

Answer 2

如果向li标签添加一个类并更改jquery选择器，它应该可以工作：

  <li class="sub-menu">



var $oe_menu_items = $oe_menu.children('li.sub-menu');

http://jsfiddle.net/L6BEE/8/

Answer 3

如何为您不想展示和更新一些脚本的项目添加一个课程？

DEMO http://jsfiddle.net/L6BEE/12/

CSS

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

JQUERY

    // updated code starts
    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');
        });
    }
    // updated code ends

jQuery Dropdown菜单：没有显示一个项目

3 个答案:

DEMO http://jsfiddle.net/L6BEE/12/

CSS

JQUERY