jQuery下拉菜单：不显示一项

Question

I've created a jQuery dropdown menu that shows div dropdowns on hover.

It's for a website's navigation menu, but the problem is that some menu items don't need a dropdown and I can't hide the menu for these items.

Here's the JSFiddle . What I need is for the menu item titled "No Hover" to not show the dropdown div.

This is the JavaScript that I'm using:

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

});

And the HTML structure:

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

Thanks for your help! Once again, the JSFiddle is here .

Answer 1

use a specific id for that item and check if it is hovered, do nothing!

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

Answer 2

If you add a class to the li tags and change the jquery selector, it should work :

  <li class="sub-menu">



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

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

Answer 3

How about add one more class for the item you don't want to show and update a few script?

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