0

我想制作一个菜单下拉菜单，如http://www.huffingtonpost.com网站。我尝试了鼠标悬停和鼠标悬停的自定义超时以喜欢该网站，但我不能。这是我的jQuery：

var navTimers = [];
$('.mcats > ul > li').each(function(){
$(this).hover(function(){
        var $this = $( this );
        var id = jQuery.data( this );
        navTimers[id] = setTimeout( function() {
            $this.addClass('hover');
            navTimers[id] = "";  
        }, 250 );

    }, function(){
        var $this = $( this ); 
        var id = jQuery.data( this );
        if ( navTimers[id] != "" )
        {  
            clearTimeout( navTimers[id] );  
        } 
        else
        {
            navTimers[id] = setTimeout( function() {
                if(!$this.is(':hover'))
                {
                    $this.removeClass('hover');
                    navTimers[id] = "";
                }
            }, 600 );
        }

    });
});

这是演示http://jsfiddle.net/rebeen/FSKbL/

子菜单显示后，我在它上面连续使用鼠标。Jquery 不适合我。

有什么好主意吗？太感谢了！

4

2 回答 2

1

对于此菜单，您只能使用 css 和 html ：

http://jsfiddle.net/dimitardanailov/m6jVd/

HTML：

<div id="menuh-container">
<div id="menuh">
    <ul>
        <li><a href="#" class="top_parent">Item 1</a>
        <ul>
            <li><a href="#">Sub 1:1</a></li>
            <li><a href="#" class="parent">Sub 1:2</a>
                <ul>
                <li><a href="#">Sub 1:2:1</a></li>
                <li><a href="#">Sub 1:2:2</a></li>
                <li><a href="#">Sub 1:2:3</a></li>
                <li><a href="#">Sub 1:2:4</a></li>
                </ul>
            </li>
            <li><a href="#">Sub 1:3</a></li>
            <li><a href="#" class="parent">Sub 1:4</a>
                <ul>
                <li><a href="#">Sub 1:4:1</a></li>
                <li><a href="#">Sub 1:4:2</a></li>
                <li><a href="#">Sub 1:4:3</a></li>
                <li><a href="#">Sub 1:4:4</a></li>
                </ul>
            </li>
            <li><a href="#" class="parent">Sub 1:5</a>
                <ul>
                <li><a href="#">Sub 1:5:1</a></li>
                <li><a href="#">Sub 1:5:2</a></li>
                <li><a href="#">Sub 1:5:3</a></li>
                <li><a href="#">Sub 1:5:</a></li>
                <li><a href="#">Sub 1:5:5</a></li>
                </ul>
            </li>
        </ul>
        </li>
    </ul>

    <ul>    
        <li><a href="#" >Item 2</a></li>
    </ul>
</div>  <!-- end the menuh-container div -->  
</div>  <!-- end the menuh div -->

CSS：

#menuh-container
    {
    position: absolute;     
    top: 1em;
    left: 1em;
    }

#menuh
    {
    font-size: small;
    font-family: arial, helvetica, sans-serif;
    width:100%;
    float:left;
    margin:2em;
    margin-top: 1em;
    }

#menuh a
    {
    text-align: center;
    display:block;
    border: 1px solid #0040FF;
    white-space:nowrap;
    margin:0;
    padding: 0.3em;
    }

#menuh a:link, #menuh a:visited, #menuh a:active    /* menu at rest */
    {
    color: white;
    background-color: #0040FF;      /* royal blue */
    text-decoration:none;
    }

#menuh a:hover                      /* menu on mouse-over  */
    {
    color: white;
    background-color: #668CFF;  /* cornflowerblue */
    text-decoration:none;
    }   

#menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
    {
    background-image: url(http://sperling.com/examples/menuh/nav_white.gif);
    background-position: right center;
    background-repeat: no-repeat;
    }

#menuh a.parent, #menuh a.parent:hover  /* attaches side-arrow to all parents */
    {
    background-image: url(http://sperling.com/examples/menuh/nav_white.gif);
    background-position: right center;
    background-repeat: no-repeat;
    }

#menuh ul
    {
    list-style:none;
    margin:0;
    padding:0;
    float:left;
    width:9em;  /* width of all menu boxes */
    /* NOTE: For adjustable menu boxes you can comment out the above width rule.
    However, you will have to add padding in the "#menh a" rule so that the menu boxes
    will have space on either side of the text -- try it */
    }

#menuh li
    {
    position:relative;
    min-height: 1px;        /* Sophie Dennis contribution for IE7 */
    vertical-align: bottom;     /* Sophie Dennis contribution for IE7 */
    }

#menuh ul ul
    {
    position:absolute;
    z-index:500;
    top:auto;
    display:none;
    padding: 1em;
    margin:-1em 0 0 -1em;
    }

#menuh ul ul ul
    {
    top:0;
    left:100%;
    }

div#menuh li:hover
    {
    cursor:pointer;
    z-index:100;
    }

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

/* End CSS Drop Down Menu */

文章

于 2013-07-17T18:46:52.473 回答
0

为什么不使用hoverIntent.js插件

于 2013-07-17T18:45:25.293 回答