我试图修改以下代码,因为这些链接仅适用于子菜单,但我也希望在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>