jQuery Accordion Menu - 选择子项时保持菜单打开

时间:2014-04-09 15:01:59

标签: javascript jquery html navigation accordion

当我在子导航中的页面上时,我想保持菜单打开。这样,它将允许用户更容易地告诉他们在网站上的位置。如何使用我的代码完成此操作?感谢您的任何反馈。

jQuery的:

$('#cssmenu > ul > li > a').click(function() {

  var checkElement = $(this).next();

  $('#cssmenu li').removeClass('active');
  $(this).closest('li').addClass('active'); 

  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
    $(this).closest('li').removeClass('active');
    checkElement.slideUp('normal', function() {
        menuHeight();
    });
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
    $('#cssmenu ul ul:visible').slideUp('normal', function() {
        menuHeight();
    });
    checkElement.slideDown('normal', function() {
        menuHeight();
    });
  }

  if($(this).closest('li').find('ul').children().length == 0) {
    return true;
  } else {
    return false; 
  }

});

HTML(示例):

<div id='cssmenu'>
    <ul>
        <li id="home"><a href='/index'><span>Home</span></a></li>
        <li id="landscaping-overview"><a href='/landscaping/landscaping-overview'><span>Landscaping</span></a>
            <ul>
            <li id="landscaping-planters"><a href='/landscaping/planters'><span>Planters</span></a></li>
            <li id="landscaping-walls"><a href='/landscaping/walls'><span>Walls</span></a></li>
            <li id="landscaping-stone-work"><a href='/landscaping/stone-work'><span>Stone Work</span></a></li>
            <li id="landscaping-walkways"><a href='/landscaping/walkways'><span>Walkways</span></a></li>
            <li id="landscaping-stairways"><a href='/landscaping/stairways'><span>Stairways</span></a></li>
            <li id="landscaping-steps"><a href='/landscaping/steps'><span>Steps</span></a></li>
            <li id="landscaping-water-falls"><a href='/landscaping/water-falls'><span>Water Falls</span></a></li>
            <li id="landscaping-ponds"><a href='/landscaping/ponds'><span>Ponds</span></a></li>
            <li id="landscaping-creek-beds"><a href='/landscaping/creek-beds'><span>Creek Beds</span></a></li>
            <li id="landscaping-pondless-water-features"><a href='/landscaping/pondless-water-features'><span>Pondless Water Features</span></a></li>
            <li id="landscaping-enhancement-lighting"><a href='/landscaping/enhancement-lighting'><span>Enhancement Lighting</span></a></li>
            <li id="landscaping-patios"><a href='/landscaping/patios'><span>Patios</span></a></li>
            <li id="landscaping-fireplaces"><a href='/landscaping/fireplaces'><span>Fireplaces</span></a></li>
        </ul>
    </li>
</div>

0 个答案:

没有答案