jQuery 菜单 - 如何添加鼠标事件？答案

【问题标题】：jQuery menu - How to add mouse events?jQuery 菜单 - 如何添加鼠标事件？
【发布时间】：2014-06-09 21:53:24
【问题描述】：

我的目标是 - 一个简单的鼠标悬停在我的菜单上，当鼠标在子菜单中时保持 active，并在鼠标离开主选项卡或子菜单时触发 close() 功能。

我知道我需要一个事件处理程序来触发close()，但我非常感谢我能得到的任何输入。

目前jquery将父类'cbp-hrclosed'重写为'cpb-hropen'

这是我想要实现的一个示例： http://tympanus.net/codrops/2013/03/05/horizontal-drop-down-menu/

jQuery

var cbpHorizontalMenu = (function() {

    var hover = 1;

    var $listItems = $( '#cbp-hrmenu > ul > li' ),
        $menuItems = $listItems.children( 'a' ),
        $body = $( 'body' ),
        current = -1;

    function init() {
        $menuItems.on( 'click', open );

        $listItems.on( 'click', function( event ) { event.stopPropagation(); 
        hover=1;
        } );
    }

    function open( event ) {

        if( current !== -1) {
            $listItems.eq( current ).removeClass( 'cbp-hropen' ).addClass('cbp-hrclosed');
        }

        var $item = $( event.currentTarget ).parent( 'li' ),
            idx = $item.index();

        if( current === idx ) {
            $item.removeClass( 'cbp-hropen' ).addClass('cbp-hrclosed');
            current = -1;
        }
        else {
            $item.addClass( 'cbp-hropen' );
            $item.removeClass('cbp-hrclosed').addClass('cbp-hropen');
            current = idx;
            $body.off( 'click' ).on( 'click', close );
            $body.on( 'click', close );
        }

        return false;

    }

    function close( event ) {
        $listItems.eq( current ).removeClass( 'cbp-hropen' ).addClass('cbp-hrclosed');
        current = -1;
        }

    return { init : init };

})();

HTML

<?php echo'<div class="container">
        <div class="main">
            <nav id="cbp-hrmenu" class="cbp-hrmenu">
                <ul>
                    <!--            Tab           -->        
                    <li class="cbp-hrclosed">
                     <a href="#">Antique</a>
                        <div class="cbp-hrsub">
                            <div class="cbp-hrsub-inner">
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>
                                </div>
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>
                                </div>
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>

                                </div>
                            </div><!-- /cbp-hrsub-inner -->
                        </div><!-- /cbp-hrsub -->
                    </li>
                    <!--            Tab           -->                   
                    <li class="cbp-hrclosed">
                        <a href="#">Modern</a>
                        <div class="cbp-hrsub">
                            <div class="cbp-hrsub-inner">
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>
                                </div>
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>
                                </div>
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>

                                </div>
                            </div><!-- /cbp-hrsub-inner -->
                        </div><!-- /cbp-hrsub -->
                    </li>
                    <!--            Tab           -->                   
                    <li class="cbp-hrclosed">
                        <a href="#">Contemporary</a>
                        <div class="cbp-hrsub">
                            <div class="cbp-hrsub-inner">
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>
                                </div>
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>
                                </div>
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>

                                </div>
                            </div><!-- /cbp-hrsub-inner -->
                        </div><!-- /cbp-hrsub -->
                    </li>
                    <!--            Tab           -->                   
                    <li class="cbp-hrclosed">
                        <a href="#">Exhibitions</a>
                        <div class="cbp-hrsub">
                            <div class="cbp-hrsub-inner">
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>
                                </div>
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>
                                </div>
                                <div>
                                    <h4>Heading</h4>
                                    <ul>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>
                                        <li><a href="#">Selection</a></li>                                      
                                        <li><a href="#">Selection</a></li>  
                                    </ul>

                                </div>
                            </div><!-- /cbp-hrsub-inner -->
                        </div><!-- /cbp-hrsub -->
                    </li>
                    </ul>
            </nav>
        </div>
    </div>
';?>

CSS

 @keyframes slideDown
{
from {top:0em;}
to {top:22.1em;}
}

@-webkit-keyframes slideDown /*Safari and Chrome*/
{
from {top:0em;}
to {top:22.1em;}
}

@keyframes slideUp
{
from {top:22.1em;
background-color:#cfcfcf;
}
to {top:0em;
background-color:#575757;
}
}

@-webkit-keyframes slideUp /*Safari and Chrome*/
{
from {top:22.1em;}
to {top:0em;}
}

.cbp-hrmenu {
    width: 100%;
    border-bottom: 4px solid #ECECEC;
}
.container{
background-color:#eee;
}

/* general ul style */
.cbp-hrmenu {
width: 100%;
/* margin-top: 2em; */
border-bottom: 6px solid #D6D6D6;
padding-top: 20px;
/* font-size: 10px; */
}

/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
    width: 90%;
    max-width: 90em;
    margin: 0 auto;
    padding: 0 1.875em;
}

.cbp-hrmenu > ul > li {
    display: inline-block;
}

.cbp-hrmenu > ul > li > a {
    font-weight: 300;
    padding: 1em 2em;
    color: #999;
    display: inline-block;
    font-size:160%;
    font-family:Francois One;
}


.cbp-hrmenu > ul > li > a:hover {
    color: #4D4D4D;
}

.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
    color: #fff;
    background: #D6D6D6;
    font-family:Francois One;
    font-weight:300;
}

/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
    display: block;
    position: absolute;
    background-color: #cfcfcf;
    width: 100%;
    left: 0;
    z-index:-1;
    top:0;

    animation:slideUp 500ms ;
    -webkit-animation:slideUp 500ms ease-in-out; /*Safari and Chrome*/

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;

    top:0;
}

.cbp-hropen .cbp-hrsub {
    display: block;

    animation:slideDown 1000ms ;
    -webkit-animation:slideDown 1000ms ease-in-out; /*Safari and Chrome*/

    animation-timing-function: ease;    
    -webkit-animation-timing-function: ease;        


    z-index:-1000;
    position:absolute;
    top:22em;
}

html.js body#home.big div#header div div.container div.main nav#cbp-hrmenu.cbp-hrmenu ul li.cbp-hropen div.cbp-hrsub{
    top:22em;
    display:block;
    background-color:#d6d6d6;
}



.cbp-hrmenu .cbp-hrsub-inner > div {
    width: 33%;
    float: left;
    padding: 0 2em 0;
}

.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
    content: " ";
    display: table;
}

.cbp-hrmenu .cbp-hrsub-inner:after {
    clear: both;
}

.cbp-hrmenu .cbp-hrsub-inner > div a {
    line-height: 2em;
    color: #fff;
    font-family: Francois One;
    font-weight: 300;
    }

.cbp-hrsub h4 {
    padding: 2em 0 0.6em;
    margin: 0;
    font-size: 160%;
    font-weight: 300;
}

/* Examples for media queries 

@media screen and (max-width: 52.75em) { 

    .cbp-hrmenu {
        font-size: 80%;
    }

}
*/


@media screen and (max-width: 43em) { 
    .cbp-hrmenu .cbp-hrsub {
    display: block;
    }

    .cbp-hrmenu {
        font-size: 120%;
        border: none;
    }

    .cbp-hrmenu > ul,
    .cbp-hrmenu .cbp-hrsub-inner {
        width: 100%;
        padding: 0;
    }

    .cbp-hrmenu .cbp-hrsub-inner {
        padding: 0 2em;
        font-size: 75%;
    }

    .cbp-hrmenu > ul > li {
        display: block;
        border-bottom: 4px solid #ECECEC;
    }

    .cbp-hrmenu > ul > li > a { 
        display: block;
        padding: 1em 3em;
    }

    .cbp-hrmenu .cbp-hrsub { 
        position: relative;
    }

    .cbp-hrsub h4 {
        padding-top: 0.6em;
    }

}

@media screen and (max-width: 43em) { 
    .cbp-hrmenu .cbp-hrsub-inner > div {
        width: 100%;
        float: none;
        padding: 0 2em;
    }
    .cbp-hropen .cbp-hrsub {
    padding-bottom: 0em;
    animation:inital;
    -webkit-animation:inital; /*Safari and Chrome*/
    z-index:inital;
    position:inital;
    }

    div .cbp-hrmenu .cbp-hrsub {
    position: static;
    }

    #cbp-hrmenu > ul > li:nth-child(1) > div,
    #cbp-hrmenu > ul > li:nth-child(2) > div,
    #cbp-hrmenu > ul > li:nth-child(3) > div,
    #cbp-hrmenu > ul > li:nth-child(4) > div
    {display:none;}

        #cbp-hrmenu > ul > li.cbp-hropen > div{display:block;}
    }

【问题讨论】：

监听mouseleave事件：$('#cbp-hrmenu > ul').on( 'mouseleave', close );

标签： javascript jquery html css drop-down-menu

【解决方案1】：

如果你使用纯 css 来完成这个菜单会容易得多。

例如，如果您使用无序列表 - 使用以下 css，您可以实现您正在做的事情，但使用 jquery 会少很多麻烦。

HTML

<ul><li>Home</li>
  <li>
    Antique
    <ul>
      <li>Heading</li>
      <li>Heading</li>
      <li>Heading</li>
    </ul>
  </li>
  <li>
    Modern
  <ul>
      <li>Heading</li>
      <li>Heading</li>
      <li>Heading</li>
    </ul>
  </li>
  <li>
    Contemporary
  <ul>
      <li>Heading</li>
      <li>Heading</li>
      <li>Heading</li>
    </ul>
  </li>
  <li>
    Exhibitions
  <ul>
      <li>Heading</li>
      <li>Heading</li>
      <li>Heading</li>
    </ul>
  </li>
</ul>

CSS

body {
  font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #E3CAA1;
}

ul {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
ul li:hover {
  background: #555;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
ul li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

希望对我有所帮助，这是我在项目中使用的 css 菜单类型，很容易根据不同需求设置样式和操作。

这是一个工作示例：http://cssdeck.com/labs/tanipt0r

【讨论】：

非常感谢山姆！我的名字也是 Sam，我非常感谢您的解决方案的工作示例。我要试试这个，看看我能不能完成我想要的。
很抱歉，如果它不是您想要的（我发布后点击了您的链接）——但它是我最喜欢的 CSS 菜单之一，因为它很容易适应