jQuery 菜单 - 隐藏的子菜单问题答案

【问题标题】：jQuery Menu - Hidden Child Menu IssuejQuery 菜单 - 隐藏的子菜单问题
【发布时间】：2013-12-23 10:33:17
【问题描述】：

我正在开发一个单页网站，我在屏幕左侧有一个固定的导航菜单。我遇到了父子菜单操作的问题。当页面加载时，子菜单被隐藏，直到用户单击带有子菜单的父元素并出现它。我想在单击另一个父菜单元素时隐藏子菜单。请看下面的当前代码：

<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

【问题讨论】：

你能把它放在一个 jsfiddle 中，这样我们就可以尝试一下并尝试让它工作。
jsfiddle.net/2RqzS 谢谢！

标签： jquery wordpress parent-child

【解决方案1】：

我为你编写了一个小代码。希望这会帮助你。 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(); 
});

【讨论】：

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

【解决方案2】：

将您的 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/

【讨论】：