0

我试图让这个 jQuery 菜单在子页面打开时自动展开。具体来说，我需要“服务”部分的子页面，例如。“平面设计”“视频制作”和“网页开发”以展开状态显示菜单。有什么建议么？

查看此 JS Bin 了解更多信息http://jsbin.com/ihoqis/6/edit

<div id="primary-nav" data-selectname="Navigate to...">
<div class="menu-navigation-container"><ul id="main-nav" class="menu">
<li id="menu-item-11784" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-11784"><a title="Interactive" href="#">Interactive</a></li>
<li id="menu-item-12121" class="menu-item menu-item-type-post_type menu-item-object-gallery menu-item-12121"><a title="Print" href="#">Print</a></li>
<li id="menu-item-15625" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-15625"><a href="#">About</a></li>
<li id="menu-item-20804" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-20802 current_page_item menu-item-20804"><a href="#">Services</a>
<ul class="sub-menu">
    <li id="menu-item-20816" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20816"><a href="#">Graphic Design</a></li>
    <li id="menu-item-20815" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20815"><a href="#">Video Production</a></li>
    <li id="menu-item-20814" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-20814"><a href="#">Web Development</a></li>
</ul>
</li>

Jquery 代码：我使用了建议，但 .show() 似乎没有效果。

jQuery(document).ready(function() { 

/*-----------------------------------------------------------------------------------*/
/*  Menu
/*-----------------------------------------------------------------------------------*/     





    if(jQuery('body').hasClass('mobile')){  // Tablet Hover Fix         
        jQuery("#main-nav li").each(function(){     
        if ($(this).find(".active").length){
       $(this).children('ul').slideToggle('normal');  
   }        
    // check URL for 'services' (may need to be refined to check a specific location
    // in the URL structure)
    if(window.location.href.indexOf("services") > -1) {
    // expand the UL below the LI containing that menu item
    $('a:contains("Services")').parents('li').children('ul').show();
    }
            if(jQuery(this).children('ul').length){ 
                var link = jQuery(this).children('a');                  
                if(link.attr('href') == '#'){
                    link.toggle( function() {jQuery(this).siblings('ul').slideDown("slow"); }, function() {jQuery(this).siblings('ul').slideUp("slow"); });
                }   


                else{
                    var firstClick = true;
                    link.click(function(e){
                    if (firstClick){
                        jQuery(this).siblings('ul').slideDown("slow");
                        firstClick = false;
                        e.preventDefault();    
                    }   
                    });                     
                }
            }
        });     
    }


    else{       
            jQuery("#main-nav li").each(function(){             
                if(jQuery(this).children('ul').length){ 
                    jQuery(this).hoverIntent({
                        interval: 10,  /*Original Value 100*/
                        over: navHoverIn,
                        timeout: 9900, /*Original Value 300*/
                        out: navHoverOut            
                    });
                }
            });
    }


    function navHoverIn () {
            jQuery(this).children('ul').slideDown("slow");
            jQuery(this).addClass("down");
    }

    function navHoverOut () {
            var menu =  jQuery(this);
            jQuery(this).children('ul').slideUp("slow",function() {
                  menu.removeClass("down");
            });          
    }

    var defaultmenu = jQuery('#primary-nav').attr('data-selectname');
    jQuery('#main-nav').mobileMenu({
            defaultText: defaultmenu
    });


    jQuery.event.special.debouncedresize.threshold = 250;
4

1 回答 1

0

像这样的东西应该可以完成这项工作：

// check URL for 'services' (may need to be refined to check a specific location
// in the URL structure)
if(window.location.href.indexOf("services") > -1) {
   // expand the UL below the LI containing that menu item
   $('a:contains("Services")').parents('li').children('ul').show();
}

这是一个演示

注意：这仅适用于初始页面加载或使用更新按钮。必须与检测 URL 的方式有关。刷新页面而不是使用运行按钮。

于 2013-02-10T18:46:58.263 回答