Question

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

<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

Answer 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(); 
});

Answer 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/

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

2 个答案: