链接仅适用于子菜单

时间:2016-09-20 11:30:15

标签: javascript html drop-down-menu

我试图修改以下代码,因为这些链接仅适用于子菜单,但我也希望在mainmenu中有一些链接。

我发现当我使用

$menuItems = $listItems.children(‘a.dropdown’);

而不是

$menuItems = $listItems.children( 'a' ),

...主菜单中的链接工作正常,但逻辑上子菜单无法打开。

整个代码:

var cbpHorizontalMenu = (function() {

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

function open( event ) {

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

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

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

    return false;

}

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

return { init : init };

HTML:

            <div class="main">
            <nav id="cbp-hrmenu" class="cbp-hrmenu">
  <ul class="nav navbar-nav navbar-right"> 
    <li><a href="/PPC.php">O SPOLEČNOSTI</a></li>
    <li>
                    <a href="#">SLUŽBY</a>
                        <div class="cbp-hrsub">
                            <div class="cbp-hrsub-inner">

                                <p>
                                     <div><ul><li class=""><a href="/socialni-site.php">SOCIÁLNÍ SÍTĚ</a></li></ul></div>
                                     <div><ul><li class=""><a href="/responzivni-web.php">RESPONZIVITA</a></li></ul></div>
                                     <div><ul><li class=""><a href="/tvorba-webu.php">TVORBA WEBU</a></li></ul></div>
                                     <div><ul><li class=""><a href="/seo-optimalizace.php">SEO OPTIMALIZACE</a></li></ul></div>
                                     <div><ul><li class=""><a href="/PPC.php">PPC</a></li></ul></div>





                            </div><!-- /cbp-hrsub-inner -->
                        </div><!-- /cbp-hrsub -->

                    </li></ul></nav>

0 个答案:

没有答案