jQuery菜单 - 隐藏子菜单问题

我正在单页网站上工作，并且在屏幕左侧有一个固定的导航菜单。我遇到了父母和子女菜单操作的问题。加载页面时，子菜单将被隐藏，直到用户单击具有子菜单的父元素并显示为止。我想在点击另一个父菜单元素时隐藏子菜单。请参阅下面的当前代码：jQuery菜单 - 隐藏子菜单问题

<script> 
$(function() { 
      $('ul.main-nav a').bind('click',function(event){ 
       var $anchor = $(this); 

       $('html, body').stop().animate({ 
        scrollTop: $($anchor.attr('href')).offset().top 
       }, 1500,'easeInOutExpo'); 
       /* 
       if you don't want to use the easing effects: 
       $('html, body').stop().animate({ 
        scrollTop: $($anchor.attr('href')).offset().top 
       }, 1000); 
       */ 
       event.preventDefault(); 
      }); 
     });

/滑子/

 $('.sub-menu').hide(); 
     $("a").click(function(){ 
      $("ul",this).slideDown(); 
      $(this).parent().children("ul").toggle('slow'); 
     });

在行动中看到实际的网站，请点击这里：http://oddsonrecords.com/recstudio

来源

2013-12-23 Nina Morena

你可以把它放在一个jsfiddle，以便我们可以试试看，并尝试使其工作。 – Chanckjh

http://jsfiddle.net/2RqzS/谢谢！ –

我已经为你做了一点小小的代码。希望这会对你有所帮助。 http://jsfiddle.net/66QZJ/2/

HTML

<ul class="nav"> 
    <li class="parent"><a href="#">menu</a> 
     <ul class="subnav"> 
      <li>submenu</li> 
      <li>submenu</li> 
      <li>submenu</li> 
      <li>submenu</li> 
     </ul> 
    </li> 
    <li class="parent"><a href="#">menu</a> 
     <ul class="subnav"> 
      <li>submenu</li> 
      <li>submenu</li> 
      <li>submenu</li> 
      <li>submenu</li> 
     </ul> 
    </li> 
    <li class="parent"><a href="#">menu</a></li> 
    <li class="parent"><a href="#">menu</a></li> 
    <li class="parent"><a href="#">menu</a></li> 
</ul>

CSS

.subnav{ 
    display: none; 
}

JQuery的

$('li.parent').on('click', function(){ 
    $(this).siblings().find('.subnav').slideUp(); 
    $(this).children('.subnav').slideDown(); 
});

来源

2013-12-23 02:30:21 Chanckjh

完美！非常感谢您的时间。 –

更改您的JavaScript来

$('.sub-menu').hide(); 
$("a").click(function() { 
    var sele = $(this).parent().children("ul"); 
    $('ul.sub-menu').each(function() { 
     if($(this).hasClass('active')) { 
      $(this).toggle('slow'); 
      $(this).removeClass('active'); 
     } 
    }); 
    sele.addClass('active'); 
    sele.toggle('slow'); 
});

检查http://jsfiddle.net/2RqzS/1/

来源

2013-12-23 02:33:17

jQuery菜单 - 隐藏子菜单问题

回答

相关问题